vuetify.js的对话框显示关闭原理

JavaScript016

vuetify.js的对话框显示关闭原理,第1张

vuetify提供了<v-dialog v-model="show">对话框组件，一个很有意思的事情是，通过在父组件设置show，就可以控制对话框的弹出和关闭。

这里给出了一个模拟实现，通过父组件按钮，控制子组件的显示和关闭。

“弹窗展示”就相当于对话框，也就相当于<v-dialog>组件。通过点击切换可以修改父组件的show变量，该变量传递给了子组件，注意不是通过v-bind的方式，而是v-model。子组件获得该变量，就可以用于显示、关闭的判断。

可以实现的，大概的思路是这样：

1.先新建一ASP页（不知道你用什么来做的，就以asp为例吧）,该页的作用是读取服务器上某个目录下的所有文件，并显示文件列表，做出类似选择文件对话框的样子。具体代码网上有很多，你以“asp 遍历文件夹”作为关键字在baidu或google中搜一下。

2.在“修改”按钮上使用Javascript的模态对话框弹出上一步做出来的网页。

就是window.showModalDialog()，模态对话框可以接收父窗口传来的参数，也可以返回参数给父窗口，利用这一特性，当你在对话框中选择好文件点确定时，可以从对话框将选择内容返回到父页面上。具体怎么用？同样建议你以“showModalDialog”作为关键字到网上去搜一下。

<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=gb2312" />

<style>

body{font-size:12pxfont-family:verdanamargin:0padding:0background-color:#FAFDFF}

a { color:#0365BFtext-decoration: none}

a:hover { color:#f60text-decoration: underline}

a.addfile{background:url(images/others/addfile.gif) no-repeatdisplay:blockfloat:leftheight:20pxmargin-top:-1pxposition:relativetext-

decoration:nonetop:0ptwidth:80pxcursor:pointer}

a:hover.addfile{background:url(images/others/addfile.gif) no-repeatdisplay:blockfloat:leftheight:20pxmargin-top:-1pxposition:relativetext-

decoration:nonetop:0ptwidth:80pxcursor:pointer}

input.addfile{cursor:pointerheight:20pxleft:-10pxposition:absolutetop:0pxwidth:1pxfilter:alpha(opacity=0)opacity:0}

#dv_fileinput_list{font-size:12pxfont-family:verdana}

#dv_fileinput_msg{font-size:12pxfont-family:verdana}

</style>

<head>

<script language="javascript">

<!--

/*改进的上传界面 HxyMan 2008-1-22*/

var DvFileInput={

$:function(d){return document.getElementById(d)},

isFF:function(){var a=navigator.userAgentreturn a.indexOf('Gecko')!=-1&&!(a.indexOf('KHTML')>-1||a.indexOf('Konqueror')>-1||a.indexOf

('AppleWebKit')>-1)},

ae:function(o,t,h){if (o.addEventListener){o.addEventListener(t,h,false)}else if(o.attachEvent){o.attachEvent('on'+t,h)}else{try{o['on'+t]=h}

catch(e){}}},

count:0,

realcount:0,

uped:0,//今天已经上传个数

max:1,//还可以上传多少个

once:1,//最多能同时上传多少个

boardid:0,

uploadcode:0,

readme:'',

add:function(){

if (DvFileInput.chkre()){

DvFileInput_OnEcho('<font color=red><b>您已经添加过此文件了!</b></font>')

}

else if (DvFileInput.realcount>=DvFileInput.max){

DvFileInput_OnEcho('<font color=red><b>您最多只能上传'+DvFileInput.max+'个文件。</b></font>')

}else if (DvFileInput.realcount>=DvFileInput.once){

DvFileInput_OnEcho('<font color=red><b>您一次最多只能上传'+DvFileInput.once+'个文件。</b></font>')

}else{

DvFileInput_OnEcho('<font color=blue>可以继续添加附件，也可以立即上传。</font>')

var o=DvFileInput.$('dv_fileinput_'+DvFileInput.count)

++DvFileInput.count

++DvFileInput.realcount

DvFileInput_OnResize()

var oInput=document.createElement('input')

oInput.type='file'

oInput.id='dv_fileinput_'+DvFileInput.count

oInput.name='dv_fileinput_'+DvFileInput.count

oInput.size=1

oInput.className='addfile'

DvFileInput.ae(oInput,'change',function(){DvFileInput.add()})

o.parentNode.appendChild(oInput)

o.blur()

o.style.display='none'

DvFileInput.show()

}

},

chkre:function(){

var c=DvFileInput.$('dv_fileinput_'+DvFileInput.count).value

for (var i=DvFileInput.count-1i>=0--i){

var o=DvFileInput.$('dv_fileinput_'+i)

if (o&&o.value==c&&DvFileInput.realcount>0){return true}

}

return false

},

filename:function(u){

var p=u.lastIndexOf('\\')

return (p==-1?u:u.substr(p+1))

},

show:function(){

var oDiv=document.createElement('div')

var oBtn=document.createElement('img')

var i=DvFileInput.count-1

oBtn.id='dv_fileinput_btn_'+i

oBtn.src='images/others/filedel.gif'

oBtn.alt='删除'

oBtn.style.cursor='pointer'

var o=DvFileInput.$('dv_fileinput_'+i)

DvFileInput.ae(oBtn,'click',function(){

DvFileInput.remove(i)

})

oDiv.innerHTML='<img src="images/others/fileitem.gif" width="13" height="11" border="0" /><font color=gray>'+o.value+'</font>'

oDiv.appendChild(oBtn)

DvFileInput.$('dv_fileinput_show').appendChild(oDiv)

},

remove:function(i){

var oa=DvFileInput.$('dv_fileinput_'+i)

var ob=DvFileInput.$('dv_fileinput_btn_'+i)

if(oa&&i>0){oa.parentNode.removeChild(oa)}

if(ob){ob.parentNode.parentNode.removeChild(ob.parentNode)}

if(0==i){DvFileInput.$('dv_fileinput_0').disabled=true}

if(0==DvFileInput.realcount){DvFileInput.clear()}else{--DvFileInput.realcount}

DvFileInput_OnResize()

},

init:function(){

var a=document

a.writeln('<form id="dv_fileinput_form" name="dv_fileinput_form" action="savefile.asp?t=1&boardid='+DvFileInput.boardid+'" target="_self"

method="post" enctype="multipart/form-data" style="margin:0padding:0"><input type="hidden" id="UploadCode" name="UploadCode"

value="'+DvFileInput.uploadcode+'" /><div id="dv_fileinput_formarea"><img src="images/others/fileitem.gif" width=6 height=6 alt="点击文字添加附件" border="0"

/><a href="javascript:">添加附件<input id="dv_fileinput_0" name="dv_fileinput_0" class="addfile" size="1" type="file" onchange="DvFileInput.add()" /></a>

<span id="dv_fileinput_upbtn"><a href="javascript:DvFileInput.send()">上传附件</a></span><span id="dv_fileinput_msg"></span>

'+DvFileInput.readme+'</div></form></div><div id="dv_fileinput_show"></div>')

},

send:function(){

if (DvFileInput.realcount>0){

DvFileInput.$('dv_fileinput_'+DvFileInput.count).disabled=true

DvFileInput.$('dv_fileinput_upbtn').innerHTML='上传中，请稍等..'

DvFileInput.$('dv_fileinput_form').submit()

}else{

alert('请先添加附件再上传。')

}

},

clear:function(){

for (var i=DvFileInput.counti>0--i){

DvFileInput.remove(i)

}

DvFileInput.$('dv_fileinput_form').reset()

var o=DvFileInput.$('dv_fileinput_btn_0')

if(o){o.parentNode.parentNode.removeChild(o.parentNode)}

DvFileInput.$('dv_fileinput_0').disabled=false

DvFileInput.$('dv_fileinput_0').style.display=''

DvFileInput.count=0

DvFileInput.realcount=0

}

}

DvFileInput_OnResize=function(){

var o=parent.document.getElementById("ad")

(o.style||o).height=(parseInt(DvFileInput.realcount)*16+18)+'px'

}

DvFileInput_OnUpload=function(iFtype,sExt,sOldName,sShowName,iDownid){

try{

if ('1'==iFtype||'2'==iFtype){

parent.dvtextarea.insert('[upload='+sExt+','+sOldName+']'+sShowName+'[/upload]<br/>')

}else{

parent.dvtextarea.insert('[upload='+sExt+','+sOldName+']viewFile.asp?ID='+iDownid+'[/upload]<br/>')

}

parent.Dvform.upfilerename.value+=(iDownid+',')

}catch(e){}

}

DvFileInput_OnEcho=function(str){

DvFileInput.$('dv_fileinput_msg').innerHTML=str

}

DvFileInput_OnMsgSuc=function(str){

DvFileInput_OnEcho(str)

DvFileInput.clear()

}

DvFileInput_OnMsgFail=function(str){

DvFileInput_OnEcho(str)

DvFileInput.clear()

}

DvFileInput_OnUpdateRndCode=function(str){

DvFileInput.$('UploadCode').value=str

}

//-->

</script>

</head>

<body>

<script language="javascript">

<!--

DvFileInput.boardid='31'

DvFileInput.uploadcode='1442'

DvFileInput.uped=parseInt('0')

DvFileInput.max=parseInt('100')

DvFileInput.once=parseInt('50')

DvFileInput.readme='今天还可上传'+DvFileInput.max+'个<a style="CURSOR: help" title="论坛限制:一次'+DvFileInput.once+'个，一天100个,每个500K">(查看论坛限制)

</a>'

DvFileInput.init()

DvFileInput_OnResize()

//-->

</script>

</body>

</html>