vue使用jsx搭建组件库

前端 0 1082 0
发表于: 2021-06-13 23:53:24

简介: 暂无~

!!!注意

文章的内容比较旧了(不建议看了),有兴趣的可以看下面的链接,里面的才是组件库的核心东西。

Modal

使用

<template>
  <div>
    <hss-modal
      v-model="visible"
      title="tip"
      cancelText="no"
      confirmText="ok"
      :mask="true"
      :maskClosable="true"
      @on-cancel="cancelClick"
      @on-confirm="confirmClick"
      @on-close="closeClick"
      @visible-change="visibleChange"
    >
      <!-- <div slot="foot" slot-scope="aaa">
        <span>自定义foot</span>
      </div> -->
      hello world
    </hss-modal>

    <span @click="changeModal">点击显示modal</span>
  </div>
</template>

<script>
import HssModal from "./components/hss-ui-cpt/modal/index";

export default {
  components: {
    HssModal,
  },
  data() {
    return {
      visible: false,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    changeModal() {
      this.visible = true;
    },
    visibleChange(v) {
      console.log("visibleChange", v);
    },
    cancelClick() {
      console.log("cancelClick,app组件里modal的cancel回调");
    },
    confirmClick() {
      console.log("cancelClick,app组件里modal的confirm回调");
    },
    closeClick() {
      console.log("closeClick,app组件里modal的close回调");
    },
  },
};
</script>

API

参数 说明 类型 默认值
visible 是否显示对话框,可使用 v-model 双向绑定数据。 Boolean false
title 对话框标题 String 标题
cancelText 取消按钮文字 String 取消
confirmText 确定按钮文字 String 确定
mask 是否显示遮罩层 Boolean true
maskClosable 点击遮罩层是否关闭对话框 Boolean true

事件

参数 说明 返回值
on-cancel 点击取消按钮回调
on-confirm 点击确认按钮回调
on-close 点击右上角关闭按钮回调
visible-change 显示状态发生变化时触发 true/false

插槽

名称 说明
foot 自定义页脚内容

Switch

使用

    <hss-switch
      v-model="switchVal"
      openText="开"
      closeText="关"
      :defaultChecked="true"
      @clickSwitch="clickSwitch"
      @changeSwitch="changeSwitch"
    >
      <template slot="openSlot">
        <b>开启</b>
      </template>
      <span slot="closeSlot">关闭</span>
    </hss-switch>

API

参数 说明 类型 默认值
switchVal 指定当前是否选中,可使用 v-model 双向绑定数据。 Boolean false
openText 选中时的内容 String
closeText 非选中时的内容 String
defaultChecked 初始是否选中 String false

事件

参数 说明 返回值
clickSwitch 点击时回调函数,此时的switchVal是点击时的 function(switchVal:Boolean,event:Event)
changeSwitch 状态改变时回调函数,此时的switchVal是最新的 function(switchVal:Boolean)

插槽

名称 说明
openSlot 选中时的插槽
closeSlot 非选中时的插槽

Button

敬请期待

Message

敬请期待

Icon

敬请期待

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=22togbuc6un4o

vue

最后更新于:2022-04-22 12:59:28

欢迎评论留言~
0/200
支持markdown
Comments | 0 条留言
按时间
按热度
目前还没有人留言~