terryz / v-dialogs Goto Github PK

bottomCenter and topCenter placement for toast messages doesnt work. The toast shows up on top left

			this.$dlg.toast('you got a new message!', function(){
			    //toast close callback
			}, {
			    messageType: 'error',
			    position: 'topCenter',
			    closeTime: 3 //auto close dialog time(second)
			});

大佬，能不能这样，shaking属性，如果是“close",就关闭，这样的话，是不是更灵活，还是说大佬已经决定了不这样做？

i write this code

<div class="card-header rgba-stylish-strong text-white pt-1 pb-1">{{$t('sideMenu1')}}</div>

return below error

as the title says

When exporting component with @Component decorator from vue-class-component / vue-property-decorator it is not a plain object.

[Vue warn]: Invalid prop: type check failed for prop "component". Expected Object, got Function 

found in

---> <DialogModal>
       <Root>

Adding Function as allowed type should fix it.

I'm trying to submit a pull request to this package to improve it, but it is my first time creating one for a npm module.
I followed the steps here https://medium.com/@nodkz/how-to-fix-nodejs-packages-within-your-app-and-send-pull-request-with-your-changes-8b4dcb89492b
and on step 7 ran npm run build

However, the css I changed in dialog.scss does not get re-built into the dist/ directory. What am I missing?

Hi.

What can/should I do get rid of that shake modal effect when the dialog is opened, and user is clicking on the overlay(outside of dialog)?

I couldn't find a way to achieve this at this api page - https://terryz.github.io/vue/#/dialog/demo

能否支持点击 模态框之外 自动关闭模态框，不必要点击关闭按钮

source code:
<div class="v-dialog-dialog" style="width: 450px; height: 210px; top: 263px;"><div class="v-dialog-content" style=""><div class="v-dialog-header"><h3>Confirmation</h3></div><div class="v-dialog-body" style="height: 168px;"><div class="v-dialog-alert alertConfirm"><div class="v-dialog-alert__content">Do you really want to leave?</div><div class="v-dialog-alert__buttons"><button type="button" class="v-dialog-btn__ok">OK</button><button type="button" class="v-dialog-btn__cancel">Cancel</button></div></div></div></div></div>

can you make it dynamic?

could you please add option for minimize modal?

does it support vuex?

I'm user any other component is not working well as my datePicker it not working well

Forpost component:

<template>
 <div class="">
 <date-picker 
   class="dateTimePiker"
   :lang="langs" 
   format="DD/MM/YYYY" 
   v-model="model.close_date" 
   :placeholder="close_date" 
   name="close_date"
 >
 </date-picker>                   
</div>
</template>
<script>
import DatePicker from 'vue2-datepicker';
export default{
 props:[],
 components:{
   'date-picker':DatePicker,
 },
 mounted(){
 },
 computed: {
 },
 data(){
     return{
       model:{
         close_date:''
       }
     }
 },
 methods:{
 }
}
</script>

Call Dialog Component:

import jobPostForm from './formPostJob.vue';
import vDialog from 'v-dialogs';
Vue.use(vDialog);
export default{
openEditPost(data){
	            this.$dlg.modal(jobPostForm, {
	            	title:"Edit Post",
	                width: 550,
	                height: 450,
	                //send params to inner component
	                params: {
	                },
	                //modal dialog close callback
	                //data: inner component call 'this.$emit.('close', data)'
	                //to close modal and return data
	                // callback: data=>{
	                //     //alert selected result
	                //     this.$dlg.alert(`You selected ${data.companyName} company`);
	                // }
	            });
		    },
}

Error:

if i write async component, show Vue Warn

  async openReferral(mailID) {
                let that = this;
                let addReferral= async ()=>{return  await import('../../referral/referralTask/add.vue')}
                that.$dlg.modal(addReferral, {width: 800, height: 750, title: "add task"
                    params: {
                    mailID :mailID,
                    }});
            },

现在的做法是emit一个事件，传递一些数据到父组件
this.$emit('close', {action: this.action, index: this.index,data: data})
但是emit之后modal就自动关闭了

如何实现父组件调用接口成功返回之后才关闭modal框?

after clicking ok button i cant redirect to another page

this.$dlg.alert("Data saved successfully!", function() {
  this.$router.push('/home')
});

Hi,
can the dialog resize and drag to other place in the window? if not, please add such features. thx.

Somehow it doesn't pop up at safari

hi, 100% width works for me but is it possible to have 100% height setting also?

为啥就不能点击外部关闭呢?

Can you add any additional languages other than the 4 languages that you provide?

How do I set the language to en instead of cn?

this.$route gives error when i work with modal

v2.2.0
not detect mixin function
cal modal:

 openAddRecModal() {
            let that = this;
            that.$dlg.modal(addRecMail, {
                width: 1600,
                height: 600,
                title: "ثبت ",
                params: {
                    page: that.page,
                    keyword: that.keyword,
                    view: that.view,
                    limit: that.limit
                }
            });
        },

inside modal i have this button:

 <input type="button" :value="i18nMixin('shared.btnSubmit')" :class="btnSubmit" @click="submitReceive" />

How can I change title, "ok" and(or) "cancel" names (strings) to custom text? In confirm alert specifically.

i hope to add responsive feature in next version...

second idea related to {params}...
with this version of v-dialogs, we should change props name from {firstname} to {params.firstname} that is not good...
it is better that i can send dynamic props name to child component...

v2.2.0

some tag not show in modal

<treeselect v-model="selectedOffice" :async="true" :load-options="(selected) => loadOptionsMixIn(selected, {modelForCall:'Office'})" :defaultOptions="true"  />

it works correctly in previous version like 2.1.4

How do use this.$dlg.alert() or this.$dlg.toast() in actions vuex ?

Trying to get a basic POC working in my Laravel app. What am I doing wrong?

blade file:

            <div id="app" class="content">
                <div class="title m-b-md">
                    Laravel
                </div>
            </div>
        <script src="/js/app.js"></script>

app.js:

require('./bootstrap');
window.Vue = require('vue');
import vDialogs from 'v-dialogs';
Vue.use(vDialogs, { });
Vue.component('vDialogs', vDialogs);

const app = new Vue({
    el: '#app',
	mounted: function() {
		console.log('mounted');
    },
    methods: {
    	show() {
			console.log('show');
			//show message with close callback and options
			this.alert('Data saved successfully!', function(){
				//dialog close callback
			}, {
				messageType: 'success',
				language: 'en'
			});

    	}
    }
});

app.show();

Calling app.show() gives an error in console. What am I doing wrong?

app.js:49382 Uncaught TypeError: this.alert is not a function
    at Vue.show (app.js:49382)
    at Module../resources/js/app.js (app.js:49390)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:49539)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

Hi,
is it possible to remove or change the picture in alert.confirm modal ?

IE9+:

div[data-v-09e2b9ea].topRight.vDialogToast{left:auto\9;bottom:auto\9;}

其他position可能也需要类似处理

Please can you give an example using Browser CDN Global.
Thank you

Hi,
when maximize the dialog by click the maximize icon, the width is maximized to full width, but the dialog height is still the old height. please fix it. thx.

v2.2.0
this error was shown when i try open modal in modal...
Cannot read properties of undefined (reading 'modal')

Hi,
thanks for useful plugin.
I need to change some css value on a specific dialog. How can I achieve it?
If I override modal-dialog class, every dialog change its attributes (as aspected)

Thanks in advance

在ant design vue中使用v-dialogs，弹出窗口中无法正常使用 时间选择器（）、下拉框(a-select)，能不能修正一下，谢谢，

我现在通过CDN方式使用时遇到了问题(历史问题不能使用npm这种方式), 我使用Vue.component{'组件名A', {}} 全局注册组件A，在其他的组件B里面这样调用 this.$dlg.modal(这个地方如何填写, {}),
尝试以下几种方式都不行

1. Vue.component('组件名A')
   报错: Invalid prop: type check failed for prop "component". Expected Object, got Function
2. '组件名'
3. 使用私有组件的注册方式进行
   都不行, 该如何填写

@tage-zh 默认的是 Font class，并不是 Unicode，这里应该要使用 Unicode
的方式生成才符合你的需求
download.zip

再说一个题外话，你的问题和需求，和这个 issues 的主题不是同个内容，你本应新建一个 issues 来说你的事情，现在题主莫明收了一大堆与其不相关的邮件提醒

我觉得不管怎么样生成，总会生成一个Unicode，只要有Unicode冲突，不管你使用什么方式 都会出现我这种情况