前言
最近接手一个项目,是h5多页面,页面中通过cdn的方式引入vant的样式和js。在用到van-swipe-cell时,把官网上的代码搬下来却没任何效果,明明设置了右侧滑动的内容,却也是滑动不了。同样的代码,在我的vue单页面应用项目里,使用是没问题的。
代码如下:
<van-swipe-cell>
<van-cell :border="false" title="单元格" value="内容" />
<template #right>
<van-button square type="danger" text="删除" />
<van-button square type="primary" text="收藏" />
</template>
</van-swipe-cell>
分析
查了一天,终于找到一位网友说的关键点,通过cdn方式引入,格式需要严格要求,标签必须成对出现,比如:
<!--正确-->
<van-button>xxx</van-button>
<!--错误-->
<van-button />
把上面有格式问题的代码,全部修改完后,发现还是滑动不了。又回去看官网的介绍,右侧滑动的内容是通过slot引入到页面中的,如下:
于是想起自己写组件时候,引入插槽的方法,果断把#换成slot字样,解决了!!!
总结
如果通过cdn的方式引入vant,使用它的插件的时候,需要注意两点:
1.插件里的标签必须成对出现,不能这样结尾 <单标签/>
2.左侧/右侧 滑动显示的内容,要使用slot="left/right"标识,而不能直接用#
示例
<van-swipe-cell>
<van-cell :border="false" title="单元格" value="内容"></van-cell>
<template slot="right">
<van-button square type="danger" text="删除"></van-button>
<van-button square type="primary" text="收藏"></van-button>
</template>
</van-swipe-cell>
声明:本站所有文章,如无特殊说明或标注,均为网络收集发布。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。