element 修改分页样式_基于Element封装可拖动放大缩小的弹窗

修改 Element 分页样式可以通过覆盖 Element 的 CSS 样式来实现。具体步骤如下：

1. 找到 Element 分页组件的 CSS 类名，例如默认分页样式的类名是 .el-pagination。

2. 在你的项目中创建一个新的 CSS 文件，例如 custom.css。

3. 在 custom.css 中定义新的样式，覆盖 Element 的默认样式。例如，要修改分页中每个页码之间的间距，可以添加以下样式：

复制.el-pagination .number {
    margin-right: 10px;
}

这将使每个页码之间的间距变为 10px。

4. 在你的项目中引入 custom.css 文件，例如在 HTML 文件中添加以下代码：

复制<link rel="stylesheet" href="path/to/custom.css">

这样就可以使用自定义的分页样式了。

基于 Element 封装可拖动放大缩小的弹窗，可以使用 Element UI 提供的 Dialog 组件，并结合 CSS 样式和 JavaScript 代码实现。具体步骤如下：

1. 在 HTML 文件中引入 Element UI 和你的自定义 CSS 文件和 JavaScript 文件。例如：

复制<link rel="stylesheet" href="path/to/element-ui.css">
<link rel="stylesheet" href="path/to/custom.css">
<script src="path/to/vue.js"></script>
<script src="path/to/element-ui.js"></script>
<script src="path/to/custom.js"></script>

2. 在 JavaScript 文件中封装可拖动放大缩小的弹窗组件。以下是一个示例代码：

复制Vue.component('draggable-dialog', {
    template: `
        <el-dialog :visible.sync="visible" :title="title" :width="width" :height="height">
            <div :style="getContainerStyle()" @mousedown="startDrag" @mouseup="stopDrag">
                <slot></slot>
            </div>
            <div class="resize-handle" @mousedown="startResize"></div>
        </el-dialog>
    `,
    props: {
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '50%'
        },
        height: {
            type: String,
            default: '50%'
        }
    },
    data() {
        return {
            visible: false,
            dragging: false,
            resizing: false,
            lastX: 0,
            lastY: 0,
            startX: 0,
            startY: 0,
            startWidth: 0,
            startHeight: 0
        }
    },
    methods: {
        startDrag(e) {
            this.dragging = true;
            this.lastX = e.clientX;
            this.lastY = e.clientY;
        },
        stopDrag() {
            this.dragging = false;
        },
        startResize(e) {
            this.resizing = true;
            this.startX = e.clientX;
            this.startY = e.clientY;
            this.startWidth = parseInt(this.width);
            this.startHeight = parseInt(this.height);
        },
        stopResize() {
            this.resizing = false;
        },
        getContainerStyle() {
            let style = {
                cursor: 'move'
            };
            if (this.dragging) {
                style.left = (e.clientX - this.lastX) + 'px';
                style.top = (e.clientY - this.lastY) + 'px';
            }
            if (this.resizing) {
                let dx = e.clientX - this.startX;
                let dy = e.clientY - this.startY;
                this.width = (this.startWidth + dx) + 'px';
                this.height = (this.startHeight + dy) + 'px';
            }
            return style;
        }
    }
});

3. 在 HTML 文件中使用自定义的弹窗组件。例如：

复制<draggable-dialog :visible="dialogVisible" :title="dialogTitle" :width="dialogWidth" :height="dialogHeight">
    <p>这是一个可以拖动和缩放的弹窗。</p>
</draggable-dialog>

这样就可以使用自定义的可拖动放大缩小的弹窗组件了。