Skip to content

V
vue2-components
Commit ff849fcf by yuyang
Options

fix: 基本组件

parent 3f4df8e7
Showing with 393 additions and 4 deletions
package.json
......@@ -28,9 +28,11 @@
"moment": "^2.27.0",
"normalize.css": "^8.0.1",
"pluralize": "^8.0.0",
"qrcode": "^1.4.4",
"qs": "^6.9.4",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-click-outside": "^1.1.0",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
......
src/components/global/ComGlobal.vue
......@@ -12,6 +12,11 @@ export default class ComGlobal extends Vue {
value = '';
arrNumber = [1, 2, 3];
arrStr = ['a', 'b', 'c'];
searcherOptions = [
{ label: '金额', value: 'amount', type: 'number' },
{ label: '支付方式', value: 'payment_way', type: 'string' },
];
query: IObject = {};
arrObj = [
{ value: 'A', label: 'a' },
{ value: 'B', label: 'b' },
......@@ -19,6 +24,7 @@ export default class ComGlobal extends Vue {
];
ComMainModalVisible = false;
ComPopoverVisible = false;
ComPopoverConfirmVisible = false;
comLogCellAudit = {
icon: 'check-circle',
username: '张三',
......@@ -161,7 +167,7 @@ export default class ComGlobal extends Vue {
)
ComGlobalTable.height_100(name="ComNoScrollBarContainer")
ComNoScrollBarContainer.div
.slot 溢出隐藏不能滚动组件
.slot 溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-溢出隐藏滚动组件-
ComGlobalTable(name="ComPanel")
ComPanel(
title="标题",
......@@ -181,7 +187,31 @@ export default class ComGlobal extends Vue {
)
.main(slot="main") main
.footer(slot="footer") footer
div 点击有气泡
a-button 点击有气泡
ComGlobalTable(name="ComPopoverConfirm")
ComPopoverConfirm(
v-model="ComPopoverConfirmVisible"
)
a-button(type="danger" @click="ComPopoverConfirmVisible=true") 点击确定删除弹窗样式
ComGlobalTable(name="ComQrCode")
ComQrCode.box_50(:data="'二维码内容'" level="H")
ComGlobalTable(name="ComRansackSearcher")
ComRansackSearcher(
v-model="query"
:options="searcherOptions"
:variables="['seq', 'projects_name', 'projects_uid', 'remark']"
tips="检索单据"
placeholder="流水单号、资金卡号、资金卡名")
ComGlobalTable(name="ComTitleContainer")
ComTitleContainer(
title="标题"
)
div(slot="actions") actions
div 插槽
ComGlobalTable(name="ComTaAvatar")
ComTaAvatar(
name="用户名"
)
</template>
<style lang="stylus" scoped>
......@@ -192,4 +222,7 @@ export default class ComGlobal extends Vue {
.height_100
text-align center
height 100px !important
.box_50
width 50px
height 50px
</style>
src/components/global/ComPopoverConfirm.vue 0 → 100644
<template lang="pug">
a-popover(
:visible="localVisible"
:placement="placement"
trigger="click"
@visibleChange="syncVisible")
template(slot="content")
.popover-card(:style="{width: width + 'px'}")
.popover-header
slot(name="title")
span {{ title }}
a-button.close(shape="circle" icon="close" size="small" @click="localVisible = false")
.popover-content
slot(name="content")
span {{ content }}
.popover-footer
slot(name="footer")
a-button(
:type="type"
block
size="large"
@click.stop="confirm"
:loading="loading"
:disabled="throttleDisabled || disabled")
| {{ okText }}
slot
</template>
<script lang="ts">
import { Component, Vue, Prop, Model, Watch, Emit } from 'vue-property-decorator';
@Component
export default class ComPopoverConfirm extends Vue {
@Model('change', { type: Boolean }) visible!: boolean;
@Prop({ type: String, default: '删除' }) title!: string;
@Prop({ type: String, default: '您确认继续执行此操作吗?' }) content!: string;
@Prop({ type: String, default: 'bottom' }) placement!: string;
@Prop({ type: Number, default: 248 }) width!: number;
@Prop({ type: Boolean, default: false }) private loading!: string;
@Prop({ type: Boolean, default: false }) private disabled!: string;
@Prop({ type: String, default: 'click' }) private trigger!: string;
@Prop({ type: String, default: 'danger' }) private type!: string;
@Prop({ type: String, default: '确认' }) private okText!: string;
@Prop({ type: Boolean, default: true }) private autoClose!: boolean;
localVisible = false;
throttleDisabled = false;
@Watch('visible')
onVisibleChange() {
this.localVisible = this.visible;
}
confirm() {
if (this.throttleDisabled) return;
this.throttleDisabled = true;
this.$emit('confirm');
this.syncVisible(false);
setTimeout(() => {
this.throttleDisabled = false;
}, 1000);
}
syncVisible(visible: boolean) {
if (this.autoClose) {
this.localVisible = visible;
this.$emit('change', visible);
if (!visible) {
this.$emit('close');
}
}
}
}
</script>
<style lang="stylus" scoped>
.popover-card
margin -12px -16px
width 100%
.popover-header
position relative
padding 15px 0px
width 100%
height 50px
border-bottom 1px #E5E5E5 solid
text-align center
font-weight 500
font-size 16px
line-height 20px
.close
position absolute
top 15px
right 12px
width 20px
height 20px
border none
color #a6a6a6
line-height 20px
&:hover
color #3da8f5
.popover-content
padding 16px
width 100%
.popover-footer
padding 12px 16px
width 100%
border-top 1px #E5E5E5 solid
</style>
src/components/global/ComQrCode.vue 0 → 100644
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import QRCode, { QRCodeErrorCorrectionLevel } from 'qrcode';
@Component
export default class ComQrCode extends Vue {
@Prop({ type: String }) data!: string;
@Prop({ type: Number, default: 6 }) scale!: number;
@Prop({ type: String, default: 'M', validator: l => ['L', 'Q', 'M', 'H'].indexOf(l) > -1 })
level!: QRCodeErrorCorrectionLevel;
@Prop({ type: String, default: '#fff' }) background!: string;
@Prop({ type: String, default: '#000' }) foreground!: string;
@Prop({ type: Number, default: 0 }) margin!: number;
mounted() {
this.draw();
['data', 'scale', 'level', 'background', 'foreground'].forEach(key => {
this.$watch(key, this.draw);
});
}
draw() {
QRCode.toCanvas(
this.$refs.qrcode,
this.data || '',
{
errorCorrectionLevel: this.level,
margin: this.margin,
scale: this.scale,
color: {
dark: this.foreground,
light: this.background,
},
},
error => {
if (!error) {
const element = this.$refs.qrcode as HTMLElement;
element.style.height = '';
element.style.width = '';
}
},
);
}
}
</script>
<template lang="pug">
canvas(ref="qrcode")
</template>
<style lang="stylus" scoped>
canvas
width 100%
height auto
</style>
src/components/global/ComTaAvatar.vue 0 → 100644
<template lang="pug">
.avatar-page(:style="{ width: boxSize, height: boxSize }")
template(v-if="url")
a-avatar.avatar(:src="url" :size="size" :style="{ borderRadius: borderRadius }")
template(v-else-if="nameText")
.avatar(
:style="{ background: sex ? bgColor : color, fontSize: fontSize, borderRadius: borderRadius, color: textColor }")
| {{ nameText }}
template(v-else-if="useName")
a-avatar(
:size="size"
:style="{ background: sex ? bgColor : color }")
| {{ name }}
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
@Component({
components: {},
})
export default class ComTaAvatar extends Vue {
@Prop({ type: String, default: '50%' }) private borderRadius?: string;
@Prop({ type: String, default: '' }) private url!: string;
@Prop({ type: String, default: '' }) private name!: string;
@Prop({ type: String, default: 'small' }) private size?: 'large' | 'small' | 'default';
@Prop({ type: String, default: '36px' }) private boxSize?: string;
@Prop({ type: String, default: '32px' }) private fontSize?: string;
@Prop({ type: String, default: '#58A8EF' }) private color!: string;
@Prop({ type: String, default: '#fff' }) private textColor!: string;
@Prop({ type: String, default: '' }) private sex!: string;
@Prop({ type: Boolean, default: false }) private short!: boolean;
get useName() {
return !this.url && this.name;
}
get nameText() {
return this.short && this.name ? this.name.slice(0, 1).toLocaleUpperCase() : '';
}
get bgColor() {
return ['男', 'male', 'Male'].includes(this.sex) ? '#58A8EF' : '#F28E36';
}
}
</script>
<style lang="stylus" scoped>
.avatar-page
width 36px
height 36px
.avatar
display flex
justify-content center
align-items center
width 100%
height 100%
background #eee
</style>
src/components/global/ComTitleContainer.vue 0 → 100644
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
components: {},
})
export default class ComTitleContainer extends Vue {
@Prop({ type: String }) private title!: string;
}
</script>
<template lang="pug">
.title-container
TaTitleHeader(:title="title")
slot(name="actions")
slot
</template>
<style lang="stylus" scoped></style>
src/components/global/TaTitleHeader.vue 0 → 100644
<template lang="pug">
.table-header
.table-header__title-box
slot(name="title")
.table-header__title
| {{ title }}
slot(name="actions")
.table-header__actions
slot
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
@Component
export default class TaTitleHeader extends Vue {
@Prop({ type: String }) title!: string;
}
</script>
<style lang="stylus" scoped>
.table-header
display flex
justify-content space-between
align-items stretch
height 48px
.table-header__title-box
align-self center
flex-shrink 0
display flex
align-items center
.table-header__title
color #383838
color #383838
font-weight 500
font-size 18px
line-height 20px
.table-header__actions
display flex
justify-content flex-end
align-items center
max-height 100%
width 100%
button
margin-left 14px
</style>
yarn.lock
......@@ -2599,6 +2599,11 @@ base64-js@^1.0.2:
resolved "https://registry.npm.taobao.org/base64-js/download/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
integrity sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE=
base64-js@^1.3.1:
version "1.5.1"
resolved "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
integrity sha1-GxtEAWClv3rUC2UPCVljSBkDkwo=
base@^0.11.1:
version "0.11.2"
resolved "https://registry.npm.taobao.org/base/download/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
......@@ -2842,7 +2847,25 @@ bser@2.1.1:
dependencies:
node-int64 "^0.4.0"
buffer-from@1.x, buffer-from@^1.0.0:
buffer-alloc-unsafe@^1.1.0:
version "1.1.0"
resolved "https://registry.npm.taobao.org/buffer-alloc-unsafe/download/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
integrity sha1-vX3CauKXLQ7aJTvgYdupkjScGfA=
buffer-alloc@^1.2.0:
version "1.2.0"
resolved "https://registry.npm.taobao.org/buffer-alloc/download/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
integrity sha1-iQ3ZDZI6hz4I4Q5f1RpX5bfM4Ow=
dependencies:
buffer-alloc-unsafe "^1.1.0"
buffer-fill "^1.0.0"
buffer-fill@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/buffer-fill/download/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
buffer-from@1.x, buffer-from@^1.0.0, buffer-from@^1.1.1:
version "1.1.1"
resolved "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
integrity sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8=
......@@ -2871,6 +2894,14 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"
buffer@^5.4.3:
version "5.7.1"
resolved "https://registry.npm.taobao.org/buffer/download/buffer-5.7.1.tgz?cache=0&sync_timestamp=1606098189689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
integrity sha1-umLnwTEzBTWCGXFghRqPZI6Z7tA=
dependencies:
base64-js "^1.3.1"
ieee754 "^1.1.13"
builtin-modules@^1.1.1:
version "1.1.1"
resolved "https://registry.npm.taobao.org/builtin-modules/download/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
......@@ -4210,6 +4241,11 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0"
randombytes "^2.0.0"
dijkstrajs@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/dijkstrajs/download/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
dir-glob@^2.0.0, dir-glob@^2.2.2:
version "2.2.2"
resolved "https://registry.npm.taobao.org/dir-glob/download/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
......@@ -5819,6 +5855,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
dependencies:
postcss "^7.0.14"
ieee754@^1.1.13:
version "1.2.1"
resolved "https://registry.npm.taobao.org/ieee754/download/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
integrity sha1-jrehCmP/8l0VpXsAFYbRd9Gw01I=
ieee754@^1.1.4:
version "1.1.13"
resolved "https://registry.npm.taobao.org/ieee754/download/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
......@@ -6322,6 +6363,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
resolved "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
isarray@^2.0.1:
version "2.0.5"
resolved "https://registry.npm.taobao.org/isarray/download/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
integrity sha1-ivHkwSISRMxiRZ+vOJQNTmRKVyM=
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
......@@ -8545,6 +8591,11 @@ pn@^1.1.0:
resolved "https://registry.npm.taobao.org/pn/download/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
integrity sha1-4vTO8OIZ9GPBeas3Rj5OHs3Muvs=
pngjs@^3.3.0:
version "3.4.0"
resolved "https://registry.npm.taobao.org/pngjs/download/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
integrity sha1-mcp9clll+2VYFOr2XzjxK72/VV8=
pnp-webpack-plugin@^1.6.4:
version "1.6.4"
resolved "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
......@@ -9199,6 +9250,19 @@ q@^1.1.2, q@^1.5.1:
resolved "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qrcode@^1.4.4:
version "1.4.4"
resolved "https://registry.npm.taobao.org/qrcode/download/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
integrity sha1-8MQ1aKfnUQpV78O4jZYC9xlj6oM=
dependencies:
buffer "^5.4.3"
buffer-alloc "^1.2.0"
buffer-from "^1.1.1"
dijkstrajs "^1.0.1"
isarray "^2.0.1"
pngjs "^3.3.0"
yargs "^13.2.4"
qs@6.7.0:
version "6.7.0"
resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
......@@ -11205,6 +11269,11 @@ vue-cli-plugin-pug@^1.0.7:
pug-plain-loader "^1.0.0"
raw-loader "^0.5.1"
vue-click-outside@^1.1.0:
version "1.1.0"
resolved "https://registry.npm.taobao.org/vue-click-outside/download/vue-click-outside-1.1.0.tgz#48b7680b518923e701643cccb3e165854aad99eb"
integrity sha1-SLdoC1GJI+cBZDzMs+FlhUqtmes=
vue-eslint-parser@^7.0.0:
version "7.1.0"
resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz?cache=0&sync_timestamp=1589539313907&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.1.0.tgz#9cdbcc823e656b087507a1911732b867ac101e83"
......@@ -11745,7 +11814,7 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
camelcase "^5.0.0"
decamelize "^1.2.0"
yargs@^13.3.0, yargs@^13.3.2:
yargs@^13.2.4, yargs@^13.3.0, yargs@^13.3.2:
version "13.3.2"
resolved "https://registry.npm.taobao.org/yargs/download/yargs-13.3.2.tgz?cache=0&sync_timestamp=1594421046064&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
integrity sha1-rX/+/sGqWVZayRX4Lcyzipwxot0=
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment