123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258 |
- <template>
- <view :animation="animation" v-if="show" class="tm-banners text-size-n "
- :class="[dense===true||dense=='true'?'dense-32':'',black_tmeme?'bk':'',color_tmeme,
- outlined||outlined=='true'?'outlined':'','round-'+round,text?'text':'']"
-
- :style="widths"
- >
- <view class=" flex-start" :class="[dense===true||dense=='true'?'py-16 px-32 ':'py-32 px-32']">
- <view class="body-left ">
- <tm-icons :black="black_tmeme" :color="(text||outlined)?color_tmeme:iconColor" :dense="true" :name="leftIcon" size="32"></tm-icons>
- </view>
- <view @click="onclick" @tap="onclick" class="body-center " :class="['text-overflow-'+col]">{{label}}</view>
-
- <view @click.stop="closeview" v-if="close" class="body-right text-align-right">
- <tm-icons :black="black_tmeme" :color="(text||outlined)?color_tmeme:iconColor" :dense="true" name="icon-times" size="28"></tm-icons>
- </view>
- </view>
- </view>
- </template>
- <script>
-
- import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
- export default {
- components:{tmIcons},
- name:'tm-banners',
- model:{
- prop:'value',
- event:'input'
- },
- props: {
-
- dense: {
- type: String | Boolean,
- default: true
- },
-
- outlined: {
- type: String | Boolean,
- default: false
- },
-
- text: {
- type: String | Boolean,
- default: false
- },
-
- label:{
- type:String | Array,
- default:""
- },
-
- black: {
- type: String | Boolean,
- default: null
- },
-
- color: {
- type: String,
- default: 'primary'
- },
- iconColor:{
- type: String,
- default: 'white'
- },
-
- leftIcon: {
- type: String,
- default: 'icon-lightbulb'
- },
-
- ani: {
- type: Boolean,
- default: false
- },
-
- close: {
- type: Boolean,
- default: true
- },
-
- y: {
- type: Number|String,
- default: 16
- },
-
- position: {
- type: String,
- default: 'top'
- },
-
- width: {
- type: Number|String,
- default: '90%'
- },
-
- round: {
- type: Number|String,
- default: '3'
- },
-
- col:{
- type: Number|String,
- default: 1
- },
-
- fllowTheme:{
- type:Boolean|String,
- default:true
- },
- value: {
- type: Boolean|String,
- default: true
- },
- },
- data() {
- return {
-
- animation: null,
- outid: 'alert-88',
-
- };
- },
- computed:{
- show:{
- get:function(){
- return this.value;
- },
- set:function(val){
- this.$emit('input',val)
- this.$emit('update:value',val)
- },
- },
- black_tmeme: function() {
- if (this.black !== null) return this.black;
- return this.$tm.vx.state().tmVuetify.black;
- },
- color_tmeme:function(){
- if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
- return this.$tm.vx.state().tmVuetify.color;
- }
- return this.color;
- },
- widths:function(){
- let topoffset = 0 + uni.upx2px(parseInt(this.y));
-
-
- if(isNaN(parseInt((this.width)))){
- return this.$tm.objToString({
- width:'100%',
- left:'0px',
- top:this.position=='bottom'?'inherit':`${topoffset}px`,
- bottom:this.position=='top'?'inherit':`${topoffset}px`
- });
- }
- if(String(this.width).indexOf('%')>-1||String(this.width).indexOf('vw')>-1){
-
- let num = parseFloat(this.width.replace(/(\%|vw|)/g,''));
- let blv = this.width.replace(/[\.|a-zA-Z0-9]/g,'');
-
- return this.$tm.objToString({
- width:this.width,
- left:(100-num)/2 + blv,
- top:this.position=='bottom'?'inherit':`${topoffset}px`,
- bottom:this.position=='top'?'inherit':`${topoffset}px`
- });
- }
- let sysinfo = uni.getSystemInfoSync();
- let wid = uni.upx2px(parseFloat(this.width));
- let lf = (sysinfo.windowWidth - wid) / 2;
- return this.$tm.objToString({
- width:uni.upx2px(parseFloat(this.width))+'px',
- left:lf+'px',
- top:this.position=='bottom'?'inherit':`${topoffset}px`,
- bottom:this.position=='top'?'inherit':`${topoffset}px`
- });
-
- }
- },
- mounted() {
-
-
- },
- methods: {
- onclick(e) {
- this.$emit('click', e);
- },
- closeview(e) {
- let t = this;
- var animation = uni.createAnimation({
- duration: 500,
- timingFunction: 'ease'
- });
- this.animation = animation;
- animation
- .scale(0.7, 0.7)
- .opacity(0)
- .step();
- this.outid = setTimeout(() => {
- t.show = false;
- t.animation=null;
- }, 500);
-
- }
- }
- };
-
- </script>
- <style lang="scss" scoped>
- .tm-banners {
- width: calc(100% - 32upx);
- left: 32upx;
- &.dense-32{
- width: calc(100% - 64upx);
- }
- position: fixed;
- z-index: 500;
- // color: #fff;
- .gs {
- width: 50upx;
- min-width: 70upx;
- }
- .body-left,
- .body-right {
- @extend .gs;
- }
- .body-center {
- width: 100%;
-
- }
- }
- </style>
|