原创 VUE 實現 Studio 管理後臺(十一):下拉選擇列表(Select)控件,輸入框 input 系列

這次 Github 上傳錯了,標題中的序號不對,我想這樣:《VUE 實現 Studio 管理後臺(十一):下拉選擇列表(Select)控件,輸入框 input 系列》實際傳成了這樣《VUE 實現 Studio 管理後臺(九):下拉選擇列表(

原创 Vular開發手記#1:設計並實現一個拼插式應用程序框架

可視化編(rxeditor)輯告一段落,在知乎上發了一個問題,詢問前景,雖然看好的不多,但是關注度還是有的,目前爲止積累了21w流量,因爲這個事,開心了好長一段時間。這一個月的時間,主要在設計製作Vular,基於Vuetify跟larval

原创 從零開始,做一個簡單的Vuetify項目,圖標安裝成功

安裝Vuefity的時候,碰到一些坑,經過一番折騰,終於成功,記錄正確的姿勢如下:  創建一個Vue項目: vue init webpack-simple vular-admin 進入項目目錄: cd vular-admin 選擇:

原创 VUE實現Studio管理後臺(十三):按鈕點選輸入控件,input輸入框系列

按鈕點選輸入,是一個非常簡單的控件,20分鐘就能完成的一個控件。先看效果: 根據以前的設定,通過json數據動態生成這兩個按鈕,示例中這兩個按鈕對應的json代碼: { label:'標題',

原创 VUE實現Studio管理後臺(十):OptionBox,一個綜合屬性輸入界面,可以級聯重置

爲了便於閱讀代碼,已經把測試數據分離出來,放在了mock目錄下: 閱讀代碼的話,稍微留意一下就好。本次介紹RXEditor界面最重要的部分,屬性輸入組件,該組件可以顯示是否有數據被修改,還可以批量重置到缺省值,效果如下: 這個界面是動態

原创 VUE實現Studio管理後臺(十二):添加輸入組合,複雜輸入,輸入框Input系列

這次的功能優點複雜,組件嵌套了很多次,自己表達能力畢竟有限,分享出來未必能講明白。爲了保持內容的連貫性,最終決定寫一下。先看效果: 關鍵點:1、組件嵌套手風琴式摺疊組件,嵌套輸入行,還嵌套輸入行的組合(例子中的邊框) 2、多角度重置實時監

原创 VUE實現Studio管理後臺(九):開關(Switch)控件,輸入框input系列

接下來幾篇作文,會介紹用到的輸入框系列,今天會介紹組普通的調用方式,因爲RXEditor要求複雜的輸入功能,後面的例子會用VUE的component動態調用,就沒有今天的這麼直觀了,控件的實現原理都一樣,只是調用方式的區別,今天的例子的調用

原创 VUE實現Studio管理後臺(七):樹形結構,文件樹,節點樹共用一套代碼NodeTree

本次介紹的內容,稍稍複雜了一點,用VUE實現樹形結構。目前這個屬性結構還沒有編輯功能,僅僅是展示。明天再開一篇文章,介紹如何增加編輯功能,標題都想好了。先看今天的展示效果: 構建樹必須用到遞歸,使用slot這種直觀明瞭的方式,已經行不通了

原创 VUE實現Studio管理後臺(六):鼠標懸停顯示彈出窗口

這次介紹的控件相對比較簡單,鼠標懸停時顯示彈出內容,效果如下: 爲了增加靈活性,用slot實現,調用時的代碼: <MouseOverPop class="toolbox-element">

原创 VUE實現Studio管理後臺(五):手風琴式摺疊組件(Accordion)

作爲一個有目標的人(目標是做一個好用的Bootstrap可視化編輯器,第一個版本已經實現,演示地址:https://vular.cn/rxeditor/,代碼地址:https://github.com/vularsoft/rxeditor)

原创 用@Html.EditorFor在MVC3中封裝帶表單(Form)提交的分頁控件(通用代碼)

MVC3框架好像沒有提供通用的用於分頁的控件,有些好心網友提供了一些不錯的控件。可惜我這個人沒耐心,不願意花一點時間去學習別人控件的用法,就自己花了點時間寫了一段簡單通用代碼,拿出來和那家分享。不是我想去重複發明輪子,只是覺得這個分頁控件內