vue使用jsx搭建组件库

hss

发布于 2022-02-25 11:05:15

57200

代码可运行

文章被收录于专栏：前端卡卡西前端卡卡西

运行总次数：0

代码可运行

项目地址

现在这篇文章只是一个使用方式，具体代码请前往：https://github.com/galaxy-s10/hss-ui-cpt，当然不能直接cv整个components过来用，因为里面依赖了一些插件，比如：less，vue-fragment，normalize.css暂时就依赖了这三个插件。

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)