Vue项目中Vant-UI库的使用（组件使用详情）_van ui

使用详情：

---

使用之前要先注册相关组件
如何配置Vant-UI以及如何注册组件详情见：Vue项目中Vant-UI库的使用（配置相关）

---

（1）Toast 轻提示使用：

<van-button type="primary" @click="openmes()">弹出轻提示</van-button>
1

openmes () {
      this.$toast('弹一个轻提示')
    },
1
2
3

效果展示:

---

（2）Popup 弹出层使用：

        <van-cell title="展示弹出层" is-link @click="showPopup()" />
        <van-popup v-model='show' @close="onClose()" position="left" :style="{ height: '100%' ,width:'40%'}">
            <div>1234567897889</div>
        </van-popup>
1
2
3
4

data () {
    return {
      show: false
    }
  },
  methods: {
    showPopup () {
      this.show = true
      console.log(this.show)
    },

    onClose () {
      this.show = false
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果展示：

---

（3）Notify 消息提示使用：

<van-button type="primary" @click="opennotify()">弹出notify</van-button>
1

opennotify () {
      this.$notify({
        message: '我是提示的notify',
        background: 'pink',
        duration: 1000
      })
    }
1
2
3
4
5
6
7

效果演示：

---

（4）NoticeBar 通知栏使用：

<van-notice-bar left-icon="volume-o" :text="thetext"/>
1

data () {
    return {
      thetext: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。'
    }
},
1
2
3
4
5

效果演示：

---

（5）Dialog 弹出框使用：

<van-button type="primary" @click="openDialog()">弹出Dialog</van-button>
1

openDialog () {
      this.$dialog.alert({
        title: '标题',
        message: '弹窗内容'
      }).then(() => {
        // on close
      })
  }
1
2
3
4
5
6
7
8

效果演示：

---

（6）Collapse 折叠面板使用：

<van-collapse v-model="activeNames" >
        <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
        <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
        <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
1
2
3
4
5

data () {
    return {
    //默认展开1，3的内容
      activeNames: ['1', '3']
    }
 }
1
2
3
4
5
6

效果展示：

---

（7）Collapse 折叠面板使用：

<van-tabbar v-model="active" @change="test()">
        <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
1
2
3
4
5
6

data () {
    return {
      active: 'home'
    }
 },
methods:{
   test () {
     if (this.active === 'home') {
        console.log('首页')
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

效果展示：

---

（7）ShareSheet 分享面板使用：

      <van-cell title="显示分享面板" @click="showShare = true" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
1
2
3
4
5
6
7

data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
    }
 },
methods:{
  onSelect (option) {
      this.$toast(option.name)
      this.showShare = false
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18