zhangqi
/
shared-components
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加提示组件、图标、表格组件

develop
zq 3 months ago
parent
080d5e81a1
commit
c450aef158
20 changed files with 14416 additions and 2177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      babel.config.js
  2. 5
      build/webpack.config.js
  3. 15704
      examples/package-lock.json
  4. 14
      examples/package.json
  5. 96
      examples/src/App.vue
  6. 4
      examples/src/main.js
  7. 109
      examples/src/table.vue
  8. 193
      package-lock.json
  9. 19
      package.json
  10. 7
      packages/GuipTable/index.js
  11. 96
      packages/GuipTable/src/index.vue
  12. 7
      packages/GuipToolTip/index.js
  13. 104
      packages/GuipToolTip/src/index.vue
  14. 7
      packages/SvgIcon/index.js
  15. 126
      packages/SvgIcon/src/index.vue
  16. BIN
      packages/assets/table_empty.png
  17. 42
      packages/index.js
  18. 4
      packages/styles/common.scss
  19. 31
      packages/styles/component.scss
  20. 12
      packages/styles/index.css

13
babel.config.js
View File

@ -0,0 +1,13 @@
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}

5
build/webpack.config.js
View File

@ -21,7 +21,8 @@ module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, './packages'), // 确保别名指向正确
'@assets': path.resolve(__dirname, './packages/assets')
'@assets': path.resolve(__dirname, './packages/assets'),
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
@ -84,7 +85,7 @@ module.exports = {
use: [{
loader: 'url-loader',
options: {
limit: 4096,
limit: 8192,
name: 'img/[name].[hash:8].[ext]',
esModule: false,
publicPath: '../'

15704
examples/package-lock.json
View File

File diff suppressed because it is too large

14
examples/package.json
View File

@ -9,23 +9,23 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"core-js": "^3.40.0",
"my-components": "file:../",
"vue": "^2.6.14",
"element-ui": "^2.15.13",
"vue": "2.6.14",
"element-ui": "^2.15.14",
"vue-loader": "^17.4.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.19",
"@vue/cli-plugin-eslint": "^4.5.19",
"@vue/cli-service": "^4.5.19",
"sass": "^1.89.2",
"babel-eslint": "^10.1.0",
"sass-loader": "^10.2.0",
"vue-template-compiler": "^2.6.14",
"css-loader": "^5.2.7",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2"
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.89.2",
"sass-loader": "^10.2.0",
"vue-template-compiler": "2.6.14"
},
"browserslist": [
"> 1%",

96
examples/src/App.vue
View File

@ -2,7 +2,6 @@
<div id="app" class="demo-container">
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<!-- 按钮组件示例 -->
<section class="demo-section">
<h2>页面提示框集合</h2>
<PromptText text='这是一个提示框' :type="1" />
@ -42,7 +41,6 @@
</div>
<div class="ele-item">
<label for="">强按钮：</label>
<!-- 默认 type= primary normal 样式 -->
<GuipButton>默认</GuipButton>
<GuipButton loading>按钮</GuipButton>
<GuipButton disabled>按钮</GuipButton>
@ -81,23 +79,13 @@
@input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput ref="GuipInput" width="133px" label="售价" placeholder="请输入售价"
unit="元"></GuipInput>
<GuipInput ref="GuipInput" width="133px" label="售价" placeholder="请输入售价" unit="元"></GuipInput>
<GuipInput v-model="form.input3" width="400px">
<span slot="prependshow">http:</span>
<!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
<!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow">.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</div>
<div class="ele-item">
<label for="">文本域：固定行数</label>
@ -159,15 +147,87 @@
<h2>下拉展开组件集合</h2>
<div class="ele-item">
<label for="">下拉框：</label>
<SvgIcon1 :iconPath="require(`@assets/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
<!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
<SvgIcon1 :iconPath="require(`@assets/home-bread.svg`)" defaultColor="#8A9099" :size="16"
activeColor="#006AFF" />
<GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
@change="selectChangeTest" prop="card" :options="options" valueKey="id1" labelKey="id2"
:extraItem="{ label: '全部', value: '99999' }" />
</div>
</section>
<section class="demo-section">
<h2>表格：(表头自定义、自定义渲染、固定列)</h2>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<GuipTable :tableData="tableData2" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" :loading="tableLoading" :border="true">
<!-- <template slot="header"> -->
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
<el-table-column prop="created_at" label="时间" width="200">
<template slot-scope="scope">
<div class="flex cell_render">
<GuipToolTip content="文字居中">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '文字居中' : '文字居中' }}</span>
</GuipToolTip>
<GuipToolTip content="图标居中">
<svg-icon :size="16" :path="require('@assets/home-bread.svg')"
:color="'#8A9099'" :hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
</template>
</el-table-column>
<el-table-column prop="unit_num" label="数量" width="180">
<template slot-scope="scope">
<GuipToolTip content="单元格局中">
<div class="flex">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '单元格局中' : '单元格局中' }}</span>
<svg-icon :size="16" :path="require('@assets/home-bread.svg')"
:color="'#8A9099'" :hoverColor="'#006AFF'" />
</div>
</GuipToolTip>
</template>
</el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150">
<template slot-scope="scope">
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}元</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址1" width="150"> </el-table-column>
<el-table-column prop="address" label="地址2" width="250"> </el-table-column>
<el-table-column prop="address" label="地址3" width="150"> </el-table-column>
<el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
<el-table-column prop="price" label="价格" width="300">
<template slot-scope="scope">
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
prop="card" :options="options" defaultValue="选项1" />
</template>
</el-table-column>
<el-table-column label="操作(固定右)" width="200" fixed="right">
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<el-button type="text">编辑</el-button>
</div>
</template>
</el-table-column>
</GuipTable>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :total="total">
</el-pagination>
</section>
</el-form>
</div>
</template>
@ -175,6 +235,10 @@
export default {
data() {
return {
tableData10: [
{ name: '张三', age: 25, address: '北京市' },
{ name: '李四', age: 30, address: '上海市' }
],
content: '测试一下',
domainOptions: [
{
@ -501,6 +565,8 @@ export default {
}],
}
},
components:{
},
created() {
console.log('当前组件注册情况:', this.$options.components)
},

4
examples/src/main.js
View File

@ -1,8 +1,10 @@
import Vue from 'vue/dist/vue.esm.js' // 必须用完整版
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
import MyComponents from '../../packages' // 本地引用组件库
// import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
// main.js
import 'core-js/stable'
// import './style/theme/index.css'
// import './style/theme/common.scss'
Vue.use(MyComponents)

109
examples/src/table.vue
View File

@ -0,0 +1,109 @@
<template>
<div>
<h3>测试表格</h3>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods:{
onSubmit() {
console.log('submit!');
}
}
}
</script>

193
package-lock.json
View File

@ -8,6 +8,10 @@
"name": "@zhicheng1012/zhicheng-components",
"version": "1.0.17",
"license": "MIT",
"dependencies": {
"async-validator": "^1.11.5",
"core-js": "^3.40.0"
},
"devDependencies": {
"babel-eslint": "~10.1.0",
"css-loader": "~5.2.7",
@ -19,10 +23,10 @@
"sass-loader": "^8.0.2",
"style-loader": "~2.0.0",
"url-loader": "^4.1.1",
"vue": "^2.6.14",
"vue": "2.6.14",
"vue-loader": "^15.9.8",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.14",
"vue-template-compiler": "2.6.14",
"webpack": "~4.46.0",
"webpack-cli": "~4.10.0"
},
@ -31,8 +35,8 @@
"npm": ">=6.0.0"
},
"peerDependencies": {
"element-ui": "^2.15.14",
"vue": "^2.6.14"
"element-ui": "2.15.14",
"vue": "2.6.14"
}
},
"node_modules/@babel/code-frame": {
@ -78,6 +82,7 @@
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
"dev": true,
"engines": {
"node": ">=6.9.0"
}
@ -86,6 +91,7 @@
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
"dev": true,
"engines": {
"node": ">=6.9.0"
}
@ -94,6 +100,7 @@
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
"integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
"dev": true,
"dependencies": {
"@babel/types": "^7.28.0"
},
@ -140,6 +147,7 @@
"version": "7.28.1",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
"integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
"dev": true,
"dependencies": {
"@babel/helper-string-parser": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1"
@ -500,19 +508,6 @@
"integrity": "sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==",
"dev": true
},
"node_modules/@vue/compiler-sfc": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"dependencies": {
"@babel/parser": "^7.23.5",
"postcss": "^8.4.14",
"source-map": "^0.6.1"
},
"optionalDependencies": {
"prettier": "^1.18.2 || ^2.0.0"
}
},
"node_modules/@vue/component-compiler-utils": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@ -1250,13 +1245,9 @@
}
},
"node_modules/async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"peer": true,
"dependencies": {
"babel-runtime": "6.x"
}
"version": "1.12.2",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.12.2.tgz",
"integrity": "sha512-57EETfCPFiB7M4QscvQzWSGNsmtkjjzZv318SK1CBlstk+hycV72ocjriMOOM48HjvmoAoJGpJNjC7Z76RlnZA=="
},
"node_modules/atob": {
"version": "2.1.2",
@ -1322,6 +1313,14 @@
"regenerator-runtime": "^0.11.0"
}
},
"node_modules/babel-runtime/node_modules/core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
"hasInstallScript": true,
"peer": true
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -1962,12 +1961,14 @@
}
},
"node_modules/core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
"version": "3.44.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.44.0.tgz",
"integrity": "sha512-aFCtd4l6GvAXwVEh3XbbVqJGHDJt0OZRa+5ePGx3LLwi12WfexqQxcsohb2wgsa/92xtl19Hd66G/L+TaAxDMw==",
"hasInstallScript": true,
"peer": true
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/core-util-is": {
"version": "1.0.3",
@ -2183,11 +2184,6 @@
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
"dev": true
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/cyclist": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
@ -2482,6 +2478,15 @@
"vue": "^2.5.17"
}
},
"node_modules/element-ui/node_modules/async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"peer": true,
"dependencies": {
"babel-runtime": "6.x"
}
},
"node_modules/elliptic": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz",
@ -5011,6 +5016,7 @@
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"dev": true,
"funding": [
{
"type": "github",
@ -5549,7 +5555,8 @@
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"dev": true
},
"node_modules/picomatch": {
"version": "2.3.1",
@ -5607,6 +5614,7 @@
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
"type": "opencollective",
@ -5721,6 +5729,7 @@
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"optional": true,
"bin": {
"prettier": "bin-prettier.js"
@ -6815,6 +6824,7 @@
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -6823,6 +6833,7 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -7788,14 +7799,10 @@
"dev": true
},
"node_modules/vue": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
"dependencies": {
"@vue/compiler-sfc": "2.7.16",
"csstype": "^3.1.0"
}
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details."
},
"node_modules/vue-eslint-parser": {
"version": "7.11.0",
@ -7966,13 +7973,13 @@
}
},
"node_modules/vue-template-compiler": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
"integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
"integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==",
"dev": true,
"dependencies": {
"de-indent": "^1.0.2",
"he": "^1.2.0"
"he": "^1.1.0"
}
},
"node_modules/vue-template-es2015-compiler": {
@ -8900,17 +8907,20 @@
"@babel/helper-string-parser": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
"dev": true
},
"@babel/helper-validator-identifier": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
"dev": true
},
"@babel/parser": {
"version": "7.28.0",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
"integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
"dev": true,
"requires": {
"@babel/types": "^7.28.0"
}
@ -8945,6 +8955,7 @@
"version": "7.28.1",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
"integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
"dev": true,
"requires": {
"@babel/helper-string-parser": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1"
@ -9117,17 +9128,6 @@
"integrity": "sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==",
"dev": true
},
"@vue/compiler-sfc": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"requires": {
"@babel/parser": "^7.23.5",
"postcss": "^8.4.14",
"prettier": "^1.18.2 || ^2.0.0",
"source-map": "^0.6.1"
}
},
"@vue/component-compiler-utils": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@ -9747,13 +9747,9 @@
"dev": true
},
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"peer": true,
"requires": {
"babel-runtime": "6.x"
}
"version": "1.12.2",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.12.2.tgz",
"integrity": "sha512-57EETfCPFiB7M4QscvQzWSGNsmtkjjzZv318SK1CBlstk+hycV72ocjriMOOM48HjvmoAoJGpJNjC7Z76RlnZA=="
},
"atob": {
"version": "2.1.2",
@ -9798,6 +9794,14 @@
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
"peer": true
}
}
},
"balanced-match": {
@ -10339,10 +10343,9 @@
"dev": true
},
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
"peer": true
"version": "3.44.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.44.0.tgz",
"integrity": "sha512-aFCtd4l6GvAXwVEh3XbbVqJGHDJt0OZRa+5ePGx3LLwi12WfexqQxcsohb2wgsa/92xtl19Hd66G/L+TaAxDMw=="
},
"core-util-is": {
"version": "1.0.3",
@ -10521,11 +10524,6 @@
}
}
},
"csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"cyclist": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
@ -10750,6 +10748,17 @@
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
},
"dependencies": {
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"peer": true,
"requires": {
"babel-runtime": "6.x"
}
}
}
},
"elliptic": {
@ -12642,7 +12651,8 @@
"nanoid": {
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"dev": true
},
"nanomatch": {
"version": "1.2.13",
@ -13073,7 +13083,8 @@
"picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"dev": true
},
"picomatch": {
"version": "2.3.1",
@ -13113,6 +13124,7 @@
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"requires": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@ -13181,6 +13193,7 @@
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"optional": true
},
"process": {
@ -14004,12 +14017,14 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true
},
"source-map-resolve": {
"version": "0.5.3",
@ -14777,13 +14792,9 @@
"dev": true
},
"vue": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
"requires": {
"@vue/compiler-sfc": "2.7.16",
"csstype": "^3.1.0"
}
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},
"vue-eslint-parser": {
"version": "7.11.0",
@ -14914,13 +14925,13 @@
}
},
"vue-template-compiler": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
"integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
"version": "2.6.14",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
"integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==",
"dev": true,
"requires": {
"de-indent": "^1.0.2",
"he": "^1.2.0"
"he": "^1.1.0"
}
},
"vue-template-es2015-compiler": {

19
package.json
View File

@ -33,16 +33,16 @@
"sass-loader": "^8.0.2",
"style-loader": "~2.0.0",
"url-loader": "^4.1.1",
"vue": "^2.6.14",
"vue": "2.6.14",
"vue-loader": "^15.9.8",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.14",
"vue-template-compiler": "2.6.14",
"webpack": "~4.46.0",
"webpack-cli": "~4.10.0"
},
"peerDependencies": {
"element-ui": "^2.15.14",
"vue": "^2.6.14"
"element-ui": "2.15.14",
"vue": "2.6.14"
},
"browserslist": [
"> 1%",
@ -59,5 +59,14 @@
"component-library",
"ui-components"
],
"license": "MIT"
"license": "MIT",
"dependencies": {
"async-validator": "^1.11.5",
"core-js": "^3.40.0"
},
"resolutions": {
"core-js": "3.40.0",
"vue": "2.6.14",
"vue-template-compiler": "2.6.14"
}
}

7
packages/GuipTable/index.js
View File

@ -0,0 +1,7 @@
import GuipTable from './src/index.vue'
GuipTable.install = function(Vue) {
Vue.component(GuipTable.name || 'GuipTable', GuipTable)
}
export default GuipTable

96
packages/GuipTable/src/index.vue
View File

@ -0,0 +1,96 @@
<template>
<el-table
class="guip-table"
ref="guiptable"
v-bind="$attrs"
:data="tableData"
v-on="$listeners"
:border="border"
@selection-change="handleSelectionChange"
:style="{ width: width || '100%', height: height || '100%' }"
v-loading="loading">
<!-- 多选列 -->
<el-table-column
v-if="multiple"
type="selection"
width="55">
</el-table-column>
<!-- 优先使用插槽内容 -->
<slot>
<!-- 如果没有插槽内容，则使用 columns 渲染 -->
<template v-if="columns">
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:width="column.width">
<template #default="{ row }" v-if="column.popover">
<el-popover :visible="row[`popoverVisible_${column.prop}`]" placement="top" trigger="click">
<slot :name="`popover-content-${column.prop}`" :row="row" :column="column">
<div>
<p>默认内容：{{ `popoverVisible_${column.prop}` }}</p>
<el-input v-model="row[`edit_${column.prop}`]" :placeholder="`请输入${column.label}`" />
</div>
</slot>
<div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
<GuipButton size="medium" @click="handleCancel(row, column.prop)">取消</GuipButton>
<GuipButton type="primary" @click="handleConfirm(row, column.prop)" size="medium">确定</GuipButton>
</div>
<template #reference>
<span style="cursor: pointer">{{ row[column.prop] }}</span>
</template>
</el-popover>
</template>
</el-table-column>
</template>
</slot>
<template #empty>
<el-empty :image="emptyImg"></el-empty>
</template>
</el-table>
</template>
<script>
import GuipButton from '../../GuipButton/src/index.vue';
export default {
name: 'GuipTable',
props: {
tableData: Array,
loading: Boolean,
width: String,
height: String,
columns: Array,
border: Boolean,
multiple: Boolean
},
components: {
GuipButton
},
data() {
return {
emptyImg: require('@assets/table_empty.png')
}
},
methods: {
handleSelectionChange(row) {
this.$emit('selectChange', row)
},
handleConfirm(row, prop) {
row[prop] = row[`edit_${prop}`];
row[`popoverVisible_${prop}`] = false;
this.$emit('confirm', row, prop);
},
handleCancel(row, prop) {
row[`edit_${prop}`] = row[prop];
row[`popoverVisible_${prop}`] = false;
this.$emit('cancel', row, prop);
}
}
}
</script>

7
packages/GuipToolTip/index.js
View File

@ -0,0 +1,7 @@
import GuipToolTip from './src/index.vue'
GuipToolTip.install = function(Vue) {
Vue.component(GuipToolTip.name || 'GuipToolTip', GuipToolTip)
}
export default GuipToolTip;

104
packages/GuipToolTip/src/index.vue
View File

@ -0,0 +1,104 @@
<template>
<el-tooltip
v-bind="mergedProps"
:disabled="disabled"
:visible="controlledVisible"
@show="handleShow"
@hide="handleHide"
>
<slot></slot>
<!-- 用于自定义提示内容 -->
<template v-if="$slots.content" #content>
<slot name="content"></slot>
</template>
</el-tooltip>
</template>
<script>
export default {
name: 'GuipToolTip',
props: {
content: String,
placement: {//位置
type: String,
default: 'top'
},
effect: {//主题颜色
type: String,
default: 'dark'
},
disabled: Boolean,
// 控制模式，如果为true则需要手动控制显示/隐藏
manual: Boolean,
// 延迟显示/隐藏（毫秒）
openDelay: {
type: Number,
default: 0
},
closeDelay: {
type: Number,
default: 0
},
// 是否在点击后隐藏（适用于点击触发）
hideAfterClick: {
type: Boolean,
default: false
}
},
data() {
return {
controlledVisible: false
}
},
computed: {
mergedProps() {
return {
effect: this.effect,
placement: this.placement,
content: this.content,
openDelay: this.openDelay,
closeDelay: this.closeDelay,
hideAfterClick: this.hideAfterClick,
...this.$attrs
}
}
},
methods: {
handleShow() {
if (this.manual) {
this.controlledVisible = true
}
this.$emit('show')
},
handleHide() {
if (this.manual) {
this.controlledVisible = false
}
this.$emit('hide')
},
// 手动显示方法
show() {
if (this.manual && !this.disabled) {
this.controlledVisible = true
}
},
// 手动隐藏方法
hide() {
if (this.manual) {
this.controlledVisible = false
}
},
// 切换显示/隐藏状态
toggle() {
if (this.manual && !this.disabled) {
this.controlledVisible = !this.controlledVisible
}
}
}
}
</script>
<style scoped>
/* 可以添加一些自定义样式 */
</style>

7
packages/SvgIcon/index.js
View File

@ -0,0 +1,7 @@
import SvgIcon from './src/index.vue'
SvgIcon.install = function(Vue) {
Vue.component(SvgIcon.name || 'SvgIcon', SvgIcon)
}
export default SvgIcon

126
packages/SvgIcon/src/index.vue
View File

@ -0,0 +1,126 @@
<template>
<div
class="svg-icon-wrapper"
:style="{ width: size + 'px', height: size + 'px' }"
@click="handleClick"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
>
<div
class="svg-icon"
v-html="svgContent"
:style="{
'--icon-color': isHovered ? hoverColor : color,
'--icon-hover-color': hoverColor
}"
></div>
</div>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
// SVG文件路径（必须）
path: {
type: String,
required: true,
validator: value => value.endsWith('.svg')
},
// 图标大小（像素）
size: {
type: Number,
default: 24
},
// 默认颜色
color: {
type: String,
default: '#333333'
},
// 悬停颜色
hoverColor: {
type: String,
default: '#409EFF'
},
// 禁用状态
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
svgContent: '',
isHovered: false
}
},
watch: {
path: {
immediate: true,
handler: 'loadSvg'
}
},
methods: {
async loadSvg() {
try {
// 使用动态import加载SVG文件
const response = await fetch(this.path)
if (!response.ok) throw new Error('SVG加载失败')
this.svgContent = await response.text()
// 如果SVG中有fill属性，替换为currentColor以便CSS控制
this.svgContent = this.svgContent.replace(/fill="[^"]*"/g, 'fill="currentColor"')
} catch (error) {
console.error('加载SVG图标失败:', error)
this.svgContent = ''
}
},
handleClick(event) {
if (!this.disabled) {
this.$emit('click', event)
}
}
}
}
</script>
<style scoped>
.svg-icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
}
.svg-icon-wrapper:hover {
opacity: 0.8;
}
.svg-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color);
transition: color 0.3s;
}
.svg-icon:hover {
color: var(--icon-hover-color);
}
.svg-icon-wrapper[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
.svg-icon >>> path {
fill: currentColor;
}
.svg-icon >>> circle {
fill: currentColor;
}
</style>

BIN
packages/assets/table_empty.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

42
packages/index.js
View File

@ -1,17 +1,21 @@
import GuipButton from './GuipButton'
import GroupFormBtns from './GroupFormBtns'
import GuipInput from './GuipInput'
import PromptText from './PromptText'
import GuipTextarea from './GuipTextarea'
import DevicePreview from './DevicePreview'
import GuipRadio from './GuipRadio'
import GuipSelect from './GuipSelect'
import Breadcrumb from './Breadcrumb'
import SvgIcon1 from './SvgIcon1'
import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
import './styles/index.css' // 全局引入
import './styles/common.scss' // 全局引入
import './styles/component.scss' // 全局引入
import GuipButton from './GuipButton';
import GroupFormBtns from './GroupFormBtns';
import GuipInput from './GuipInput';
import PromptText from './PromptText';
import GuipTextarea from './GuipTextarea';
import DevicePreview from './DevicePreview';
import GuipRadio from './GuipRadio';
import GuipSelect from './GuipSelect';
import Breadcrumb from './Breadcrumb';
import SvgIcon1 from './SvgIcon1';
import SvgIcon from './SvgIcon';
import GuipTable from './GuipTable';
import GuipTooltip from './GuipToolTip';
import 'core-js/stable'
import 'element-ui/lib/theme-chalk/index.css'; // 如果依赖Element
import './styles/index.css'; // 全局引入
import './styles/common.scss'; // 全局引入
import './styles/component.scss'; // 全局引入
const components = [
GuipButton,
@ -23,7 +27,10 @@ const components = [
GuipRadio,
GuipSelect,
Breadcrumb,
SvgIcon1
SvgIcon1,
SvgIcon,
GuipTable,
GuipTooltip
]
const install = function (Vue) {
@ -46,5 +53,8 @@ export default {
GuipRadio,
GuipSelect,
Breadcrumb,
SvgIcon1
SvgIcon1,
SvgIcon,
GuipTable,
GuipTooltip
}

4
packages/styles/common.scss
View File

@ -931,7 +931,9 @@ body {
background: #F6F7FA;
padding: 10px 0;
}
.el-table__header th{
background: #F6F7FA;
}
.el-table th.el-table__cell>.cell {
padding-left: 16px;
padding-right: 16px;

31
packages/styles/component.scss
View File

@ -194,4 +194,33 @@
// .guip-svg-icon-wrapper .svg-icon>>>svg {
// fill: currentColor;
// }
// }
// 表格组件
.guip-table{
.custom-empty {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.empty-image {
width: 160px;
height: 160px;
}
.empty-text {
color: #626573;
letter-spacing: 0.08em;
height: 18px;
line-height: 18px;
}
.el-empty{
padding: 0;
}
}
.guip-table ::v-deep .el-empty__description{
line-height: 20px;
margin-top: 0;
}

12
packages/styles/index.css
View File

@ -7645,10 +7645,10 @@ border-color:#006AFF !important;
background-color: #e6f0ff
}
.el-table__body tr.hover-row.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,
.el-table__body tr.hover-row>td.el-table__cell {
.el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td,
.el-table__body tr.hover-row>td {
background-color: #f5f7fa
}
@ -7679,12 +7679,12 @@ border-color:#006AFF !important;
transform: scale(.75)
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
.el-table--enable-row-transition .el-table__body td {
-webkit-transition: background-color .25s ease;
transition: background-color .25s ease
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #f5f7fa
}

Write Preview
Loading…
Cancel
Save