mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
fix: scss styles
This commit is contained in:
JiwenBai
parent
50c6ce2b2f
commit
cad19017ea
@ -45,10 +45,7 @@
|
||||
<n-button style="margin:0">
|
||||
word wrap
|
||||
</n-button>
|
||||
<span slot="content">
|
||||
"Beautiful designs at up to 70% Off. Article offers stylish
|
||||
modern, mid-century and scandinavian furniture from world renowned
|
||||
designers at accessible prices."</span>
|
||||
<span slot="content">"Beautiful designs at up to 70% Off. Article offers stylish modern, mid-century and scandinavian furniture from world renowned designers at accessible prices."</span>
|
||||
</n-popup>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
@ -163,11 +160,10 @@
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea v-pre>
|
||||
<n-popup placement="left" trigger="click" transfer :arrow="false">
|
||||
<n-button style="margin:0">No Arrow</n-button>
|
||||
<span slot="content">click out side to hide</span>
|
||||
</n-popup>
|
||||
</textarea>
|
||||
<n-popup placement="left" trigger="click" transfer :arrow="false">
|
||||
<n-button style="margin:0">No Arrow</n-button>
|
||||
<span slot="content">click out side to hide</span>
|
||||
</n-popup></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
4
index.js
4
index.js
@ -7,7 +7,7 @@ import WithPadding from './packages/common/WithPadding'
|
||||
import WithMargin from './packages/common/WithMargin'
|
||||
import MasonryGroup from './packages/common/MasonryGroup'
|
||||
import Table from './packages/common/Table'
|
||||
// import AdvanceTable from './packages/common/AdvanceTable'
|
||||
import AdvanceTable from './packages/common/AdvanceTable'
|
||||
import CheckBox from './packages/common/Checkbox'
|
||||
import RoundButton from './packages/common/Button'
|
||||
import Switch from './packages/common/Switch'
|
||||
@ -40,7 +40,7 @@ function install (Vue) {
|
||||
ServiceCard.install(Vue)
|
||||
MasonryGroup.install(Vue)
|
||||
Table.install(Vue)
|
||||
// AdvanceTable.install(Vue)
|
||||
AdvanceTable.install(Vue)
|
||||
WithMargin.install(Vue)
|
||||
CheckBox.install(Vue)
|
||||
RoundButton.install(Vue)
|
||||
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
|
||||
const { keyName, render, row } = ctx.props
|
||||
if (render) {
|
||||
return <div>{render(h, params)}</div>
|
||||
} else return <div>{row[keyName]}</div>
|
||||
return h('div', [render(h, params)])
|
||||
} else return h('div', [row[keyName]])
|
||||
}
|
||||
}
|
||||
@ -41,7 +41,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import row from '../row/index.jsx'
|
||||
import row from '../row/index.js'
|
||||
import SortIcon from '../sortIcon'
|
||||
import filterIcon from '../filterIcon'
|
||||
|
||||
|
||||
@ -1,38 +1,40 @@
|
||||
<template>
|
||||
<div
|
||||
v-click-outside="handleClickOut"
|
||||
style="postion:relative"
|
||||
class="n-popup"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<div
|
||||
ref="reference"
|
||||
style="position:relative;"
|
||||
class="n-popup__rel"
|
||||
@click="handleClickRef"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<transition name="n-poup__fade">
|
||||
<div
|
||||
v-show="visible"
|
||||
ref="popper"
|
||||
v-transfer-dom
|
||||
:data-transfer="transfer"
|
||||
:style="style"
|
||||
class="popper n-popup__content__wrapper"
|
||||
class="popper n-popup__content-wrapper"
|
||||
@click="handleContentClick"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<div v-if="arrow" class="n-popup-arrow" />
|
||||
<div
|
||||
v-if="arrow"
|
||||
class="n-popup__arrow"
|
||||
/>
|
||||
<div
|
||||
class="n-popup__content"
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
'box-sizing': 'border-box'
|
||||
'max-width': width + 'px',
|
||||
}"
|
||||
:class="{
|
||||
'n-popup__word_wrap': width ? true : false
|
||||
'n-popup--word_wrap': width ? true : false
|
||||
}"
|
||||
>
|
||||
<slot name="content" />
|
||||
@ -52,6 +54,10 @@ export default {
|
||||
directives: { clickOutside, TransferDom },
|
||||
mixins: [Popper],
|
||||
props: {
|
||||
value: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return [
|
||||
@ -107,6 +113,11 @@ export default {
|
||||
return style
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.visible = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickRef () {
|
||||
if (this.trigger === 'click') {
|
||||
@ -129,6 +140,7 @@ export default {
|
||||
clearTimeout(this.timerId)
|
||||
this.timerId = setTimeout(() => {
|
||||
this.visible = false
|
||||
this.$emit('input', this.visible)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
@ -138,6 +150,7 @@ export default {
|
||||
}
|
||||
this.timerId = setTimeout(() => {
|
||||
this.visible = true
|
||||
this.$emit('input', this.visible)
|
||||
}, 100)
|
||||
},
|
||||
handleMouseEnter () {
|
||||
|
||||
@ -4,103 +4,9 @@ $popup-arrow-width: 7px;
|
||||
$popup-bg-color: rgba(75, 81, 106, 1);
|
||||
$popup-distance: $popup-arrow-width - 1 + 14;
|
||||
|
||||
.n-popup__content__wrapper {
|
||||
border-radius: 6px;
|
||||
background-color: rgba(75, 81, 106, 1);
|
||||
color: #ffffffe6;
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
transition: opacity 0.3s $default-cubic-bezier,
|
||||
transform 0.3s $fast-in-cubic-bezier;
|
||||
opacity: 1;
|
||||
margin: 7px;
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
|
||||
|
||||
&[x-placement^="top"] .n-popup-arrow {
|
||||
bottom: 0%;
|
||||
left: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="top-start"] .n-popup-arrow {
|
||||
left: $popup-distance;
|
||||
}
|
||||
&[x-placement^="top-end"] .n-popup-arrow {
|
||||
right: $popup-distance;
|
||||
left: unset;
|
||||
}
|
||||
&[x-placement^="top"] .n-popup-arrow:after {
|
||||
content: " ";
|
||||
margin-left: -$popup-arrow-width;
|
||||
border-bottom-width: 0;
|
||||
border-top-width: $popup-arrow-width;
|
||||
border-top-color: $popup-bg-color;
|
||||
}
|
||||
&[x-placement^="right"] .n-popup-arrow {
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="right-start"] .n-popup-arrow {
|
||||
top: 13px;
|
||||
}
|
||||
&[x-placement^="right-end"] .n-popup-arrow {
|
||||
bottom: 13px;
|
||||
top: unset;
|
||||
}
|
||||
&[x-placement^="right"] .n-popup-arrow:after {
|
||||
content: " ";
|
||||
left: -$popup-arrow-width;
|
||||
margin-top: -$popup-arrow-width;
|
||||
border-left-width: 0;
|
||||
border-right-width: $popup-arrow-width;
|
||||
border-right-color: $popup-bg-color;
|
||||
}
|
||||
&[x-placement^="bottom"] .n-popup-arrow {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="bottom-start"] .n-popup-arrow {
|
||||
left: $popup-distance;
|
||||
}
|
||||
&[x-placement^="bottom-end"] .n-popup-arrow {
|
||||
right: $popup-distance;
|
||||
left: unset;
|
||||
}
|
||||
&[x-placement^="bottom"] .n-popup-arrow:after {
|
||||
content: " ";
|
||||
top: -($popup-arrow-width);
|
||||
margin-left: -$popup-arrow-width;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: $popup-arrow-width;
|
||||
border-bottom-color: $popup-bg-color;
|
||||
}
|
||||
&[x-placement^="left"] .n-popup-arrow {
|
||||
right: 0%;
|
||||
top: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="left-start"] .n-popup-arrow {
|
||||
top: 13px;
|
||||
}
|
||||
&[x-placement^="left-end"] .n-popup-arrow {
|
||||
bottom: 13px;
|
||||
top: unset;
|
||||
}
|
||||
&[x-placement^="left"] .n-popup-arrow:after {
|
||||
content: " ";
|
||||
top: 0;
|
||||
right: -($popup-arrow-width);
|
||||
margin-top: -$popup-arrow-width;
|
||||
border-right-width: 0;
|
||||
border-left-width: $popup-arrow-width;
|
||||
border-left-color: $popup-bg-color;
|
||||
bottom: $popup-arrow-width;
|
||||
}
|
||||
}
|
||||
.n-popup {
|
||||
&-arrow {
|
||||
display: inline-block;
|
||||
&__arrow {
|
||||
border-width: $popup-arrow-width;
|
||||
&,
|
||||
&:after {
|
||||
@ -115,15 +21,116 @@ $popup-distance: $popup-arrow-width - 1 + 14;
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-popup__ref {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
}
|
||||
.n-popup__content-wrapper {
|
||||
border-radius: 6px;
|
||||
background-color: rgba(75, 81, 106, 1);
|
||||
color: #ffffffe6;
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
z-index: 1;
|
||||
transition: opacity 0.3s $default-cubic-bezier,
|
||||
transform 0.3s $fast-in-cubic-bezier;
|
||||
opacity: 1;
|
||||
margin: 7px;
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
|
||||
|
||||
.n-popup__word_wrap {
|
||||
&[x-placement^="top"] .n-popup__arrow {
|
||||
bottom: 0%;
|
||||
left: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="top-start"] .n-popup__arrow {
|
||||
left: $popup-distance;
|
||||
}
|
||||
&[x-placement^="top-end"] .n-popup__arrow {
|
||||
right: $popup-distance;
|
||||
left: unset;
|
||||
}
|
||||
&[x-placement^="top"] .n-popup__arrow:after {
|
||||
content: " ";
|
||||
margin-left: -$popup-arrow-width;
|
||||
border-bottom-width: 0;
|
||||
border-top-width: $popup-arrow-width;
|
||||
border-top-color: $popup-bg-color;
|
||||
}
|
||||
&[x-placement^="right"] .n-popup__arrow {
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="right-start"] .n-popup__arrow {
|
||||
top: 13px;
|
||||
}
|
||||
&[x-placement^="right-end"] .n-popup__arrow {
|
||||
bottom: 13px;
|
||||
top: unset;
|
||||
}
|
||||
&[x-placement^="right"] .n-popup__arrow:after {
|
||||
content: " ";
|
||||
left: -$popup-arrow-width;
|
||||
margin-top: -$popup-arrow-width;
|
||||
border-left-width: 0;
|
||||
border-right-width: $popup-arrow-width;
|
||||
border-right-color: $popup-bg-color;
|
||||
}
|
||||
&[x-placement^="bottom"] .n-popup__arrow {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="bottom-start"] .n-popup__arrow {
|
||||
left: $popup-distance;
|
||||
}
|
||||
&[x-placement^="bottom-end"] .n-popup__arrow {
|
||||
right: $popup-distance;
|
||||
left: unset;
|
||||
}
|
||||
&[x-placement^="bottom"] .n-popup__arrow:after {
|
||||
content: " ";
|
||||
top: -($popup-arrow-width);
|
||||
margin-left: -$popup-arrow-width;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: $popup-arrow-width;
|
||||
border-bottom-color: $popup-bg-color;
|
||||
}
|
||||
&[x-placement^="left"] .n-popup__arrow {
|
||||
right: 0%;
|
||||
top: 50%;
|
||||
border: 0;
|
||||
}
|
||||
&[x-placement^="left-start"] .n-popup__arrow {
|
||||
top: 13px;
|
||||
}
|
||||
&[x-placement^="left-end"] .n-popup__arrow {
|
||||
bottom: 13px;
|
||||
top: unset;
|
||||
}
|
||||
&[x-placement^="left"] .n-popup__arrow:after {
|
||||
content: " ";
|
||||
top: 0;
|
||||
right: -($popup-arrow-width);
|
||||
margin-top: -$popup-arrow-width;
|
||||
border-right-width: 0;
|
||||
border-left-width: $popup-arrow-width;
|
||||
border-left-color: $popup-bg-color;
|
||||
bottom: $popup-arrow-width;
|
||||
}
|
||||
}
|
||||
.popup__content {
|
||||
box-sizing: 'border-box'
|
||||
}
|
||||
.n-popup--word_wrap {
|
||||
white-space: pre-wrap;
|
||||
text-align: justify;
|
||||
}
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
.n-poup__fade-enter-active,
|
||||
.n-poup__fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
.n-poup__fade-enter, .n-poup__fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user