uni-app使用Vant组件
<h3 id="前言">前言</h3><p>vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。</p>
<h3 id="使用步骤">使用步骤</h3>
<p>下载代码</p>
<ul>
<li>
<p>在项目根目录下新建 <code>wxcomponents</code> 目录 ，此目录应该与<code>components</code> 目录同级。</p>
</li>
<li>
<p>直接通过 <code>git</code> 下载 <code>vant-weapp</code> 最新源代码，并将<code>dist</code>目录拷贝到新建的<code>wxcomponents</code>目录下，并重命名<code>dist</code>为<code>vant-weapp</code>。</p>
</li>
<li>
<p>在pages.json的<mark>globalStyle</mark>中 引入所需要的组件</p>
<p> <img src="https://s1.ax1x.com/2020/05/20/Yo0cyd.png" style="zoom: 80%"></p>
</li>
</ul>
<p>试试是否成功</p>
<img src="https://s1.ax1x.com/2020/05/20/YoBTN6.gif">
<pre><code class="language-html"><template>
<div>
<van-picker
v-if="flag"
:columns="columns"
@change="changePicker"
/>
<van-button @click="show">显示</van-button>
</div>
</template>
<script>
export default {
data() {
return {
columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
flag: false
};
},
methods: {
show() {
console.log("1 =", "show");
this.flag = !this.flag;
},
changePicker(event) {
console.log("1 =", event);
}
}
};
</script>
</code></pre>
<h3 id="注意事项">注意事项</h3>
<p>Vant组件中<code>Notify</code> 消息提示比较特殊</p>
<p>不仅需要在pages.json的<mark>globalStyle</mark>中 引入还需要再main.js中添加到vue原型上</p>
<pre><code class="language-js">//main.js
import Notify from './wxcomponents//vant/notify/notify';
Vue.prototype.$notify = Notify
</code></pre>
<p>然后在页面中使用</p>
<pre><code class="language-html"><template>
<view>
<van-button @click="showNotify">弹出提示</van-button>
<van-notify id="van-notify" />
</view>
</template>
<script>
export default {
methods: {
showNotify() {
this.$notify({ type: "danger", message: "通知内容" });
}
}
};
</script>
</code></pre><br><br>
来源：https://www.cnblogs.com/cjh1996/p/12922359.html
頁:
[1]