Select2 控件

Elementor select2 控件基于 Select2 库显示一个选择框控件。它接受一个数组，其中 key 是值，value 是选项名称。将 multiple 设置为 true 以允许多值选择。

该控件在继承 Base_Data_Control 类的 Control_Select2 类中定义。

使用此控件时，type 应设置为 \Elementor\Controls_Manager::SELECT2 常量。

参数

Return Value

(string|array) The selected option key, or an array of selected keys if multiple is set to true.

Usage

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'list',
			[
				'label' => esc_html__( 'Show Elements', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::SELECT2,
				'label_block' => true,
				'multiple' => true,
				'options' => [
					'title'  => esc_html__( 'Title', 'textdomain' ),
					'description' => esc_html__( 'Description', 'textdomain' ),
					'button' => esc_html__( 'Button', 'textdomain' ),
				],
				'default' => [ 'title', 'description' ],
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();
		if ( $settings['list'] ) {
			echo '<ul>';
			foreach ( $settings['list'] as $item ) {
				echo '<li>' . $item . '</li>';
			}
			echo '</ul>';
		}
	}

	protected function content_template(): void {
		?>
		<# if ( settings.list.length ) { #>
			<ul>
			<# _.each( settings.list, function( item ) { #>
				<li>{{{ item }}}</li>
			<# } ) #>
			</ul>
		<# } #>
		<?php
	}

}