Skip to content

Commit

Permalink
fix: 修复复制组件的popover实现 (#278)
Browse files Browse the repository at this point in the history 
* fix: 修复复制组件的popover实现
  • Loading branch information
@YufJi
YufJi committed May 6, 2024
1 parent 39793cc commit c6d1daa
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 75 deletions.
1 change: 1 addition & 0 deletions scripts/genThemeConfig/property.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@
"--van-tabs-bottom-bar-height": "3px",
"--van-tabs-bottom-bar-color": "var(\n --van-tabs-default-color\n )",
"--van-tabs-bottom-bar-border-radius": "3px",
"--van-tabs-card-nav-margin": "0 24px",
"--van-uploader-size": "80px",
"--van-uploader-icon-size": "24px",
"--van-uploader-icon-color": "#dcdee0",
Expand Down
7 changes: 7 additions & 0 deletions scripts/genThemeConfig/result.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -786,6 +786,13 @@
"excludeTags": [
"van-tab"
]
},
"--van-tabs-card-nav-margin": {
"type": "input",
"desc": "card模式 导航外边距",
"excludeTags": [
"van-tab"
]
}
},
"preview": {
Expand Down
55 changes: 35 additions & 20 deletions src-vusion/components/copy/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
<template>
<div :class="$style.root">
<div @click="copy" vusion-slot-name="default">
<slot>
<s-empty v-if="(!$slots.default) && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty>
<van-link v-else :disabled="disabled" vusion-slot-name-edit="text">{{ text }}</van-link>
</slot>
</div>
<u-tooltip v-if="feedback === 'tooltip'" :placement="placement" trigger="manual" :opened.sync="success">
{{ successText }}
</u-tooltip>
<u-tooltip :placement="placement" trigger="manual" :opened.sync="failed">
{{ failTip }}
</u-tooltip>
<van-popover v-model="visible" :placement="placement" theme="dark" get-container="body">
<span :class="$style.tooltip">{{ success ? successText : failTip }}</span>

<template #reference>
<div @click="copy" vusion-slot-name="default">
<slot>
<s-empty v-if="(!$slots.default) && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty>
<van-link v-else :disabled="disabled" vusion-slot-name-edit="text">{{ text }}</van-link>
</slot>
</div>
</template>
</van-popover>
</div>
</template>

<script>
import ClipboardJS from 'clipboard';
// import i18n from '@/utils/i18n';
import { SEmpty } from 'cloud-ui.vusion/src/components/s-empty.vue';
import { UTooltip } from 'cloud-ui.vusion/src/components/u-tooltip.vue';
import Popover from '../../../src/popover';
import { createI18N } from '../../../src/utils/create/i18n'
const name = 'van-copy';
Expand All @@ -28,7 +28,10 @@ const t = createI18N(name);
export default {
name,
components: { SEmpty, UTooltip },
components: {
SEmpty,
Popover
},
props: {
value: String,
text: { type: String, default: '复制' },
Expand All @@ -39,7 +42,11 @@ export default {
feedback: { type: String, default: 'tooltip' },
},
data() {
return { success: false, timeoutId: undefined, failed: false };
return {
success: false,
timeoutId: undefined,
visible: false,
};
},
computed: {
failTip() {
Expand All @@ -58,12 +65,14 @@ export default {
if (this.feedback === 'toast')
this.$toast.show(this.successText, this.hideDelay);
this.$emit('copy', { value: this.value }, this);
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.success = false;
}, this.hideDelay);
}
this.failed = !this.success;
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(() => {
this.visible = false;
}, this.hideDelay);
this.visible = true;
},
},
};
Expand All @@ -74,4 +83,10 @@ export default {
display: inline-block;
position: relative;
}
.tooltip {
white-space: nowrap;
font-size: 12px;
padding: 5px 10px;
color: #fff;
}
</style>
125 changes: 117 additions & 8 deletions src-vusion/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,123 @@ export { utils };
export { install } from '@vusion/utils';
export * from './components';

const requires = require.context('../src/', true, /\.less$/);
requires.keys().forEach((key) => {
requires(key);
});
// requires.keys().forEach((key) => {
// const name = requires(key).default.name || key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'));
// Vue.component(name, requires(key).default);
// });
import '../src/style/animation.less';
import '../src/style/base.less';
import '../src/style/clearfix.less';
import '../src/style/ellipsis.less';
import '../src/style/hairline.less';
import '../src/style/mixins/clearfix.less';
import '../src/style/mixins/ellipsis.less';
import '../src/style/mixins/hairline.less';
import '../src/style/normalize.less';
import '../src/style/reset.less';
import '../src/style/var.less';

import '../src/popup/index.less';
import '../src/overlay/index.less';

import '../src/action-sheet/index.less';
import '../src/address-edit/index.less';
import '../src/address-list/index.less';
import '../src/area/index.less';
import '../src/badge/index.less';
import '../src/button/index.less';
import '../src/calendar/index.less';
import '../src/capsules-group/index.less';
import '../src/capsules-item/index.less';
import '../src/capsules/index.less';
import '../src/card/index.less';
import '../src/cardu/cardu.less';
import '../src/cascader/index.less';
import '../src/cascaderbak/index.less';
import '../src/cell-group/index.less';
import '../src/cell/index.less';
import '../src/cellson/index.less';
import '../src/checkbox-group/index.less';
import '../src/checkbox/index.less';
import '../src/circle/index.less';
import '../src/col/index.less';
import '../src/collapse-item/index.less';
import '../src/contact-card/index.less';
import '../src/contact-edit/index.less';
import '../src/contact-list/index.less';
import '../src/count-down/index.less';
import '../src/coupon-cell/index.less';
import '../src/coupon-list/index.less';
import '../src/coupon/index.less';
import '../src/datetime-picker/index.less';
import '../src/dialog/index.less';
import '../src/divider/index.less';
import '../src/dropdown-item/index.less';
import '../src/dropdown-menu/index.less';
import '../src/empty/index.less';
import '../src/field/index.less';
import '../src/fieldinput/index.less';
import '../src/fieldsonforsearch/index.less';
import '../src/fieldtextarea/index.less';
import '../src/for-components/index.less';
import '../src/form/index.less';
import '../src/gallery/index.less';
import '../src/goods-action-button/index.less';
import '../src/goods-action-icon/index.less';
import '../src/goods-action/index.less';
import '../src/grid-item/index.less';
import '../src/grid/index.less';
import '../src/icon/index.less';
import '../src/icon/local.less';
import '../src/iconv/index.less';
import '../src/iconv/local.less';
import '../src/image-preview/index.less';
import '../src/image/index.less';
import '../src/index-anchor/index.less';
import '../src/index-bar/index.less';
import '../src/info/index.less';
import '../src/linear-layout/index.less';
import '../src/list/index.less';
import '../src/loading/index.less';
import '../src/nav-bar/index.less';
import '../src/notice-bar/index.less';
import '../src/notify/index.less';
import '../src/number-keyboard/index.less';
import '../src/pagination/index.less';
import '../src/panel/index.less';
import '../src/password-input/index.less';
import '../src/picker/index.less';
import '../src/pickerson/index.less';
import '../src/popover-combination/index.less';
import '../src/popover/index.less';
import '../src/progress/index.less';
import '../src/pull-refresh/index.less';
import '../src/radio-group/index.less';
import '../src/radio/index.less';
import '../src/rate/index.less';
import '../src/row/index.less';
import '../src/search/index.less';
import '../src/share-sheet/index.less';
import '../src/sidebar-item/index.less';
import '../src/sidebar/index.less';
import '../src/skeleton/index.less';
import '../src/sku/index.less';
import '../src/slider/index.less';
import '../src/step/index.less';
import '../src/stepper-new/index.less';
import '../src/stepper/index.less';
import '../src/steps/index.less';
import '../src/sticky/index.less';
import '../src/submit-bar/index.less';
import '../src/swipe-cell/index.less';
import '../src/swipe-item/index.less';
import '../src/swipe/index.less';
import '../src/switch-cell/index.less';
import '../src/switch/index.less';
import '../src/tab/index.less';
import '../src/tabbar-item/index.less';
import '../src/tabbar/index.less';
import '../src/tabs/index.less';
import '../src/tag/index.less';
import '../src/toast/index.less';
import '../src/tree-select/index.less';
import '../src/uploader/index.less';

// 保证在H5样式之后
/* 引入cloud-ui theme */
Expand Down
44 changes: 1 addition & 43 deletions src/popover/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export default createComponent({
},
getContainer: {
type: [String, Function],
default: 'body',
},
closeOnClickAction: {
type: Boolean,
Expand Down Expand Up @@ -238,47 +237,6 @@ export default createComponent({
},

render() {
const styletemp = {
background: '#FAFAFA',
border: '1px dashed #CCCCCC',
height: '14.93333vw',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
fontSize: '4.26667vw',
color: '#666666',
}
if (this.ifDesigner()) {
return (
<div style={styletemp} ref="wrappertemp">
<span ref="wrapper" class={bem('wrapper')} onClick={this.onClickWrapper}>
<Popup
ref="popover"
value={this.valued}
class={bem([this.theme])}
overlay={this.overlay}
position={null}
transition="van-popover-zoom"
lockScroll={false}
// getContainer={this.getContainer}
onOpen={this.onOpen}
onClose={this.onClose}
onInput={this.onToggle}
onOpened={this.onOpened}
onClosed={this.onClosed}
nativeOnTouchstart={this.onTouchstart}
>
<div class={bem('arrow')} />
<div class={bem('content')} role="menu">
{this.slots('default') || this.actions.map(this.renderAction)}
</div>
</Popup>
</span>
<div>双击打开/关闭气泡框</div>
</div>
)
}

return (
<span ref="wrapper" class={bem('wrapper')} onClick={this.onClickWrapper}>
<Popup
Expand All @@ -289,7 +247,7 @@ export default createComponent({
position={null}
transition="van-popover-zoom"
lockScroll={false}
// getContainer={this.getContainer}
getContainer={this.getContainer}
onOpen={this.onOpen}
onClose={this.onClose}
onInput={this.onToggle}
Expand Down
4 changes: 0 additions & 4 deletions src/popup/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ export default createComponent({
default: false,
},
designTitle: String,
// getContainer: {
// type: String,
// default: 'body',
// },
},

beforeCreate() {
Expand Down

0 comments on commit c6d1daa

Please sign in to comment.