vue自定义dialog
第一步: 给Dialog设置一个风格主题: 无边框全透明背景
在res->valus->styles.xml 下新建一个styles
<style name="dialog" parent="android:style/Theme.Dialog">
<!--背景颜色及和透明程度-->
<item name="android:windowBackground">@android:color/transparent</item>
<!--是否去除标题 -->
<item name="android:windowNoTitle">true</item>
<!--是否去除边框-->
<item name="android:windowFrame">@null</item>
<!--是否浮现在activity之上 -->
<item name="android:windowIsFloating">false</item>
<!--背景是否模糊-->
<item name="android:backgroundDimEnabled">false</item>
</style>
第二步：新建自定义view 类 继承Dialog,在构造方法中引用刚才写好的styles(粗体部分)
public class MyDialog extends Dialog {
public LoginRestltDialog(@NonNull Context context) {
//引用样式
super(context, R.style.dialog );
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//引入布局
setContentView(R.layout.dialog);
}
//定义其他需要的方法
}
第三步：创建布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=""
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#11ffffff">
<LinearLayout
android:layout_width="260dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/dialog_share"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="15dp"
android:gravity="center"
android:text="消息提示"
android:textColor="#38ADFF"
android:textSize="16sp" />
<TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:text="提示消息" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginTop="15dp"
android:background="#E4E4E4" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal">
<Button
android:id="@+id/no"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@null"
android:gravity="center"
android:singleLine="true"
android:text="No"
android:textColor="#7D7D7D"
android:textSize="16sp" />
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:background="#E4E4E4" />
<Button
android:id="@+id/yes"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="@null"
android:gravity="center"
android:singleLine="true"
android:text="Yes"
android:textColor="#38ADFF"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
第四步：定义dialog的背景框
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="">
<solid android:color="#ffffff" />
<stroke
android:width="0.8dp"
android:color="#ffffff" />
<!-- 圆角 -->
<corners android:radius="8dp" />
</shape>
最后在需要的地方调用即可
Vue.js + Typescript实现的轻量级Dialog组件除了基本的alert、comfirm、prompt以外 我们还横向扩展了选项组的actions，以及自定义填充图片或者内容的dialog。
满足了基本需求外，我们还纵向扩展了点击弹窗时的异步载入能力，使其满足需要点击后加载数据，加载完成才能关闭弹窗的场景。
对于prompt，我们还提供了轻量可扩展的文本域校验以及错误提示。
由于该组件面向小型项目以及非工程化的项目，我们提供了umd打包的版本以及window打包的版本，以满足所有零碎项目的需求。
面向开发者，我们提供了完善的类型推导文件(d.ts)。使其在开发过程中拥有能够更好的体验。由于是基于Typescript开发的，我们的组件对Typescript项目拥有完全的亲和力。
除了支持基础的alert、confirm、prompt外 还扩展了
此外 支持html模板渲染，自定义prompt文本域检查等功能 满足绝大部分弹窗场景
对于非工程化项目
VueDialogX支持script标签引入
对于工程化项目，VueDialogX提供umd方式引入
VueDialogX 提供两种挂载方式
一种使用Vue.use的方式挂载
也可以引入VueDialogX来自行初始化实例
