qtsk-vue3 0.0.9 → 0.0.11

package/package/component.js

@@ -1,4 +1,4 @@
-import Button from './components/Button/index.vue'
+import CommonButton from './components/Button/index.vue'
 import Container from './components/Container/index.vue'
 import Menu from './components/Menu/index.vue'
 import Icons from './components/Icons/index.vue'
@@ -12,10 +12,11 @@ import Tree from './components/Tree/index.vue'
 import Dialog from './components/Dialog/index.vue'
 import Form from './components/Form/index.vue'
 import FormItem from './components/FormItem/index.vue'
+import Empty from './components/Empty/index.vue'
 
 const components = 
     [
-        Button, 
+        CommonButton, 
         Container,
         Menu, 
         Icons, 
@@ -28,6 +29,7 @@ const components =
         Tree, 
         Dialog,
         Form,
-        FormItem
+        FormItem,
+        Empty
     ]
 export default components

package/package/components/Button/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="[type === 'default' ? 'defaultClass' : 'normalClass']">
-      <el-button :type="type" :color="color" :link="link">
+    <div class="normalClass">
+      <el-button :type="type" :color="color" :link="link" :loading="loading">
         <slot>按钮</slot>
       </el-button>
     </div>
@@ -11,35 +11,32 @@ import { ElButton} from 'element-plus'
 import '../../style/root.css'
 
 defineOptions({
-  name: 'Button',
+  name: 'CommonButton',
 })
-const props = defineProps({
+defineProps({
   type:{
     type: String,
     default: 'default', //可选数值有， primary/default
   },
   color: {
     type: String,
-    default: '#4d4398'
+    default: ''
   },
   link: {
     type: Boolean,
     default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 //根据不同的类型，自定义按钮颜色
-const color = props.type === 'primary' ? props.color : ''
+// const color = props.type === 'primary' ? props.color : ''
 </script>
 
 <style lang="less" scoped>
 .normalClass{
   margin: 0 10px;
 }
-.defaultClass{
-  margin: 0 10px;
-  :deep(.el-button){
-    color: var(--qt-main-color)!important;
-    border-color: var(--qt-main-color)!important;
-  }
-}
 </style>

package/package/components/Container/index.vue

@@ -38,6 +38,7 @@ defineOptions({
         .el-header{
             display: flex;
             align-items: center;
+            justify-content: space-between;
             height: 60px;
         }
         .el-aside, .el-main{

package/package/components/DatePicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-config-provider :locale="zhCn">
-    <el-date-picker v-model="modelValue" type="date" :placeholder="placeholder" :format="format" :value-format="format"/>
+    <el-date-picker style="width: 100%;" v-model="modelValue" :type="type" :placeholder="placeholder" :format="format" :value-format="format"/>
   </el-config-provider>
 </template>
 
@@ -21,9 +21,14 @@ const props = defineProps({
     type: String,
     default: '请选择'
   },
+  type: {
+    type: String,
+    default: 'date'
+  }
 })
 
-const modelValue = defineModel('modelValue', { type: Boolean })
+const modelValue = defineModel('modelValue', { type: String })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+</style>

package/package/components/Dialog/index.vue

@@ -38,14 +38,14 @@ defineProps({
 })
 
 let modelValue = defineModel('modelValue', {type: Boolean})
-
+let emits = defineEmits(['confirm'])
 // 点击取消
 const handleCancel = () => {
   modelValue.value = false
 }
 // 点击确认
 const handleConfirm = () => {
-  modelValue.value = false
+  emits('confirm')
 }
 </script>
 

package/package/components/Empty/index.vue

@@ -0,0 +1,20 @@
+<template>
+     <el-empty :description="description" />
+</template>
+
+<script setup>
+import { ElEmpty} from 'element-plus'
+
+defineOptions({
+  name: 'Empty',
+})
+defineProps({
+  description:{
+    type: String,
+    default: '敬请期待',
+  }
+})
+</script>
+
+<style lang="less" scoped>
+</style>

package/package/components/Form/index.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { ElForm } from 'element-plus'
 
 defineOptions({
@@ -21,8 +22,8 @@ defineOptions({
 
 defineProps({
   rules: {
-    type: Array,
-    default: () => ([])
+    type: Object,
+    default: () => ({})
   },
   inline: {
     type: Boolean,
@@ -31,6 +32,17 @@ defineProps({
 })
 
 let formData = defineModel('formData', {type: Object})
+let ruleFormRef = ref(null)
+
+const resetForm = () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.resetFields()
+}
+
+defineExpose({
+  resetForm,
+  ruleFormRef
+})
 
 </script>
 

package/package/components/Input/index.vue

@@ -1,5 +1,14 @@
 <template>
-    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs"/>
+    <ElInput :type="type" :placeholder="placeholder" v-model="inputValue" v-bind="$attrs" clearable>
+        <template #prepend v-if="$slots.prepend">
+            <!-- 前缀 -->
+            <slot name="prepend" />
+        </template>
+        <template #append v-if="$slots.append">
+            <!-- 后缀 -->
+            <slot name="append" />
+        </template>
+    </ElInput>
 </template>
 
 <script setup>
@@ -24,6 +33,6 @@ const inputValue = defineModel('modelValue', {default: '',type: [String, Number]
 
 <style lang="less" scoped>
 :deep(.el-textarea__inner:focus), :deep(.el-input__wrapper.is-focus){
-    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+    box-shadow: 0 0 0 1px var(--main-color) inset;
 }
 </style>

package/package/components/Message/index.js

@@ -3,25 +3,26 @@
 */
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-export const Message = {
-    error: (message) => {
-        ElMessage.error(message)
-    },
-    success: (message) => {
-        ElMessage({
-            message,
-            type: 'success',
-        })
-    },
-    warning: (message) => {
-        ElMessage({
-            message,
-            type: 'warning',
-          })
-    },
-    info:  (message) => {
-        ElMessage(message)
+// 重置message，防止重复点击重复弹出message弹框
+let messageInstance = null;
+// 判断是否已经存在信息实例
+const hasMessageInstance = (type, message) => {
+    if (messageInstance) {
+        messageInstance.close();
     }
+    messageInstance = ElMessage[type]({
+        message,
+        type,
+    })
 }
 
-export const MessageBox = ElMessageBox
+export let Message = {};
+
+['error', 'success', 'info', 'warning'].forEach((type) => {
+	Message[type] =(message) => {
+        hasMessageInstance(type, message)
+    };
+})
+
+
+export const MessageBox = ElMessageBox

package/package/components/Pagination/index.vue

@@ -21,13 +21,16 @@ defineProps({
     default: 0
   }
 })
+const emits = defineEmits(['handleChangePage'])
 // 条目个数改变
 const handleSizeChange = (val) => {
   console.log(`${val} items per page`)
+  emits('handleChangePage', 'size', val)
 }
 // 当前页码改变
 const handleCurrentChange = (val) => {
   console.log(`current page: ${val}`)
+  emits('handleChangePage', 'current', val)
 }
 </script>
 

package/package/components/Select/index.vue

@@ -1,5 +1,11 @@
 <template>
-    <el-select v-model="selectValue" :placeholder="placeholder" v-bind="$attrs" :teleported="false">
+    <el-select
+        v-model="selectValue" 
+        :placeholder="placeholder" 
+        v-bind="$attrs" 
+        :teleported="false" 
+        clearable
+    >
         <el-option v-for="item in options" :key="item[valueName]" :label="item[keyName]" :value="item[valueName]" />
     </el-select>
 </template>
@@ -29,14 +35,14 @@ defineProps({
         default: 'value'
     }
 })
-const selectValue = defineModel('modelValue', { default: '', type: [Number, String] })
+const selectValue = defineModel('modelValue', { default: '', type: [Number, String, Array] })
 </script>
 
 <style lang="less" scoped>
 :deep(.el-select__wrapper.is-focused){
-    box-shadow: 0 0 0 1px var(--qt-main-color) inset;
+    box-shadow: 0 0 0 1px var(--main-color) inset;
 }
 :deep(.el-select-dropdown__item.is-selected){
-    color: var(--qt-main-color);
+    color: var(--main-color);
 }
 </style>

package/package/components/Table/index.vue

@@ -1,20 +1,21 @@
 <template>
   <div>
-    <el-table :data="data" style="width: 100%" :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" border>
+    <el-table :data="data" style="width: 100%" :height="height" :header-cell-style="{background:'#f2f4f7', color:'#606266',height: '60px'}" border>
       <el-table-column 
         v-for="(column, index) in columns" 
         :label="column.label"
         :width="column.width"
         :fixed="column.fixed"
         :key="index"
+        :show-overflow-tooltip="column.width?true:false"
       >
         <template #default="scope">
-          <div v-if="column.key!=='operations'">
+          <template v-if="column.key!=='operations'">
             {{ scope.row[column.key] }}
-          </div>
-          <div v-else>
+          </template>
+          <template v-else>
              <slot name="operations" :data="scope.row" :index="scope.$index"/>
-          </div>
+          </template>
         </template>
       </el-table-column>
       <template #empty>
@@ -35,6 +36,10 @@ defineProps({
     type: Object,
     default: () => ([])
   },
+  height: {
+    type: Number,
+    default: 400
+  },
   columns: {
     type: Array,
     default: () => ([])

package/package/components/Tree/index.vue

@@ -1,15 +1,27 @@
 <template>
   <el-tree 
     ref="treeRef"
-    style="max-width: 600px" 
+    style="max-width: 600px;padding-top: 4px;" 
     :data="data" 
     :props="defaultProps" 
     :show-checkbox="showCheckBox" 
     default-expand-all
     :node-key="nodeKey"
     :expand-on-click-node="false"
-    @node-click="handleNodeClick" 
-  />
+    :default-checked-keys="checkedKeys"
+    @node-click="handleNodeClick"
+    @check-change="checkChange"
+  >
+    <template #default="{ node, data }" v-if="editable">
+        <span class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <span>
+            <Icons type="Delete" style="margin-right: 10px;" @click.stop="handleOperations(data,'delete')"/>
+            <Icons type="Edit" @click.stop="handleOperations(data, 'edit')"/>
+          </span>
+        </span>
+    </template>
+  </el-tree>
 </template>
 
 <script setup>
@@ -17,11 +29,13 @@ import { ref } from 'vue'
 import { ElTree } from 'element-plus'
 
 const treeRef = ref(null)
+const modelValue = defineModel('modelValue', { type: Array })
+
 defineOptions({
   name: 'Tree',
 })
 
-defineProps({
+const props = defineProps({
   data: {
     type: Array,
     default: () => ([])
@@ -33,26 +47,61 @@ defineProps({
   nodeKey: {
     type: String,
     default: 'id'
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  checkedKeys: {
+    type: Array,
+    default: () => ([])
+  },
+  labelName: {
+    type: String,
+    default: 'name'
   }
 })
 
+const emits = defineEmits(['handleTree', 'handleNode'])
 // 点击节点
 const handleNodeClick = (data) => {
-  console.log('tree-data', data)
+  console.log('data', data)
+  emits('handleNode', data)
 }
 
 const defaultProps = {
   children: 'children',
-  label: 'label',
+  label: props.labelName
 }
 
 // 获取选中的节点
 const getCheckedKeys = () => {
-  console.log(treeRef.value.getCheckedKeys(false))
+  return treeRef.value.getCheckedKeys(false)
+}
+
+//当复选框被点击的时候触发, 用于获取所有的选中数据
+const checkChange = () => {
+  modelValue.value = treeRef.value.getCheckedKeys(false)
+}
+
+const handleOperations = (data, type) => {
+  emits('handleTree', data, type)
 }
 defineExpose({
   getCheckedKeys
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+.el-tree .is-current {
+  background: pink;
+}
+</style>

package/package/index.backup.js

@@ -1,5 +1,5 @@
 import Components from './component'
-import { QTMessage, QTMessageBox } from './components/Message'
+import { Message, MessageBox } from './components/Message'
 
 const makeInstaller = (components = [], directives = []) => {
     const apps = []
@@ -17,6 +17,6 @@ const makeInstaller = (components = [], directives = []) => {
 
 const install = makeInstaller(Components)
 
-export { QTMessage, QTMessageBox, install, install as default }
+export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/index.js

@@ -19,7 +19,4 @@ const install = makeInstaller(Components)
 
 export { Message, MessageBox, install, install as default }
 
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:green;')
-
-
-console.info('%c====== Editing in local package ======', 'font-size:16px;color:yellow;')
+console.info('%c====== Editing in local package ======', 'font-size:16px;color:pink;')

package/package/style/root.css

@@ -1,5 +1,5 @@
 /* 标准化样式定义 */
 :root{
     --main-color: #4d4398;
-    --main-background-color: #e0edff;
-}
+    --main-background-color: #e0edff
+}

package/package.json

@@ -1,25 +1,25 @@
 {
-  "name": "qtsk-vue3",
-  "version": "0.0.9",
-  "description": "vue3版组件库",
-  "main": "./package/index.js",
-  "scripts": {
-    "patch": "node publish/build.js patch",
-    "minor": "node publish/build.js minor",
-    "major": "node publish/build.js major"
-  },
-  "keywords": [
-    "qingtingzhiyun",
-    "qtzy"
-  ],
-  "files": [
-    "package"
-  ],
-  "author": "qingting_tech",
-  "license": "MIT",
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "@vue/shared": "^3.5.6",
-    "element-plus": "^2.8.3"
-  }
-}
+    "name": "qtsk-vue3",
+    "version": "0.0.11",
+    "description": "vue3版组件库",
+    "main": "./package/index.js",
+    "scripts": {
+        "patch": "node publish/build.js patch",
+        "minor": "node publish/build.js minor",
+        "major": "node publish/build.js major"
+    },
+    "keywords": [
+        "qingtingzhiyun",
+        "qtzy"
+    ],
+    "files": [
+        "package"
+    ],
+    "author": "qingting_tech",
+    "license": "MIT",
+    "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
+        "@vue/shared": "^3.5.6",
+        "element-plus": "^2.8.3"
+    }
+}