Panel 面板

提供 wx-panel 和 wx-panel-item 两个组件。

图文组合

<wx-panel title="图文组合" more-text="查看更多" @moreClick="handleClick">
  <wx-panel-item :title="title" :desc="desc" :img="img" @click="handleClick" v-for="i in 2" :key="i"></wx-panel-item>
</wx-panel>

<script>
import img from "@/assets/vue.png";
export default {
  data() {
    return {
      title: "Vue 3.0 beta 了",
      desc:
        "17号凌晨，尤大更新微博，发布了Vue 3.0 beta 测试版，震惊一波吃瓜熬夜党，这个男人终于带着Vue 3来了！",
      img
    };
  },
  methods: {
    handleClick() {
      this.$toast("got!");
    }
  }
};
</script>

文字组合

<wx-panel title="文字组合" more-text="查看更多" :more-to="{path: '/'}">
  <wx-panel-item :title="title" :desc="desc" v-for="i in 2" :key="i"></wx-panel-item>
</wx-panel>

<script>
// 同图文
</script>

附带来源

<wx-panel title="附带来源">
  <wx-panel-item :title="title" :desc="desc" :metas="['Vue中文社区', '1天前']" :to="{path: '/'}"></wx-panel-item>
</wx-panel>

<script>
// 同图文
</script>

提示

wx-panel 组件在绑定路由信息或事件的条件下，自动显示更多详情

Panel Attributes

参数	说明	类型	可选值	默认值
title	标题信息，空值即不显示	String	-	-
moreTo	更多详情的路由信息，配合 vue-router 使用	String/Object	-	-
moreText	自定义更多文本	String	-	-

Panel Events

事件名称	说明	回调参数
moreClick	点击更多详情时触发，如设置了属性 more-to ，则优先路由跳转	event: Event

Panel-item Attributes

参数	说明	类型	可选值	默认值
title	标题信息，空值即不显示	String	-	-
desc	描述信息	String	-	-
img	图片	String	-	-
to	路由信息，配合 vue-router 使用	String/Object	-	-
metas	附加来源信息数组	Array	-	[]

Panel-item Events

事件名称	说明	回调参数
click	点击时触发，如设置了属性 to ，则优先路由跳转	event: Event

面板