前言

       最近接手一个项目，是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>