vue移动终端框架组件示例

最近做了一个移动项目，写子弹盒比较麻烦。我通过搜索信息找到了这个组件，但是解释文档很少。我自己研究了一下，把我的错误和详细用法分享给大家！如果您有任何问题，可以打开组件看一看。这个组件是仿层移动的，很多用途都是一样的，可以看看！

一.国家预防机制的安装

//最新版本1 . 2 . 0 NPM install vue-layer-mobile//如果新版本遇到问题，可以回滚旧版本npm install [emailprotected]。2.调整配置：因为这个组件中有woff、TTF、eto和SVG文件，所以应该配置一些加载器。

//在webpack.config.js中进行如下配置。首先安装url加载程序和文件加载程序：{test:/\。woff $/，loader:' URL加载器？limit=10000 mime type=application/font-woff ' }，{ test: /\。ttf$/，loader: 'url-loader？limit=10000 mime type=application/octet-stream ' }，{ test: /\。eot$/，loader:“文件加载器”}，test: /\。svg$/，loader: 'url-loader？limit=10000 mime type=image/SVG XML ' } III。介绍和使用

导入' vue-layer-mobile/require/layer . CSS '从' vue-layer-mobile ' vue . use(layer)IV导入图层。具体用法介绍：——这个组件有六种方法，都不是完全模仿层移动的，一些简单的外壳还是很好用的。

//toast:文本和图标： testlayerttoast () {this。$ layer . toast({ icon : ' icon-check '，//icon clssName如果为空，则toast位置在底部，否则，它以content: '提示文本'为中心。Time: 2000 //自动消失时间toast类型默认消失时间为2000毫秒})}，//loading : testlayer loading 1(){ var _ this=this；这个。$layer.loading ('loading . ');setTimeout(函数(){ _this。$ layer . close()；},3000);}，//dialog : testlayerdialog(){ this。$ layer.dialog ({title : ['这是标题'，' background:red'】，//第一个是标题内容，第二个是标题栏样式(可以为空)content: '这就是内容'，Content Class :' Class Name '，BTN 3360 ['Cancel '，' OK']，//time: 2000 }) //如果有BTN。然后(function (res){ //res为0，表示当用户点击左边的1时，用户点击右边的let position=res===0？left ' : ' right ' console . log(position)})，//footer : testlayerfoot(){ this。$ layer.footer ({content: '这是内容'，btn: ['取消'，'选项1 '，选项2'] }) //如果有btn。然后(函数(RES) {vartext=RES==0？取消“:”选项“resconsole.log (text)})}，//打开testlayeropen () {this。$ layer.open ({style: '边框： none背景-颜色： # 78ba 32；color: # fff，content:' content'})}，//closestlayerclose(){ var _ this=this；这个。$layer.loading('测试关闭方法')；setTimeout(函数(){ _this。$ layer . close()；},3000);}显示多种效果：

vue移动终端弹性框架组件的上述示例是边肖共享的所有内容。希望能给大家一个参考，支持我们。